How to use custom events to implement communication between components in Vue

Vue is a popular front-end framework that provides many convenient features, one of which is custom events. Custom events are a way of communication between Vue components, allowing developers to easily share data and events between different components.

Vue provides a simple way to create custom events. We can use the $emit() method in the Vue instance to trigger custom events, and use v-on in the component that needs to receive the event. command to listen for events. Below I will introduce in detail how to use custom events to implement communication between components in Vue.

1. Create Vue instance

First we need to create a Vue instance, which will serve as the root instance of our application. In this instance, we need to register all the child components we will use.

// main.js
import Vue from 'vue'
import App from './App.vue'
import ChildComponent from './components/ChildComponent.vue'

Vue.component('child-component', ChildComponent)

new Vue({
  el: '#app',
  render: h => h(App)
})

In this example, we registered a custom component named "child-component".

2. Trigger a custom event

Next, in a component, we need to trigger a custom event. We can use the $emit() method in the Vue instance to accomplish this task. The $emit() method will trigger a specified custom event and pass an arbitrary parameter.

For example, we might trigger a custom event after a form is submitted, saving it in a variable called "submitted":

// ChildComponent.vue
<template>
  <div>
    <form @submit.prevent="submitForm">
      <!-- 表单输入 -->
      <button type="submit">Submit</button>
    </form>
  </div>
</template>
<script>
export default {
  methods: {
    submitForm() {
      // 保存表单数据
      // ...
      this.$emit('submitted', formData)
    }
  }
}
</script>

In this example, we use v The -on directive listens to the "submit" event, triggers a custom event named "submitted" through the $this.$emit() method in the submitForm() method, and passes the form data.

3. Listening to custom events

Now, we need to listen to the custom event we just triggered in another component. In order to accomplish this task, we can use the v-on directive in the Vue instance to listen for the event.

For example, we may want to display the form data just submitted in another component:

// AnotherComponent.vue
<template>
  <div>
    Submitted form data: {{ submittedData }}
  </div>
</template>
<script>
export default {
  data() {
    return {
      submittedData: null
    }
  },
  mounted() {
    this.$on('submitted', data => {
      this.submittedData = data
    })
  }
}
</script>

In this example, we use $this in the mounted() life cycle hook function. $on() method to listen for a custom event named "submitted". When the event is fired, we save the passed data in the component's data property.

4. Delivery of custom events

In Vue, custom events can be delivered in the component hierarchy, which means that a component can pass the $emit() method An event is fired, and the event is passed up the component hierarchy until it is caught by a parent component or until it reaches a Vue instance.

If we listen to a custom event in a parent component, then we can trigger the event directly from the child component without explicitly defining the event in the child component.

For example, we can define an event handler in a parent component and pass it to the child component:

// ParentComponent.vue
<template>
  <div>
    <child-component @submitted="handleSubmittedData" />
  </div>
</template>
<script>
export default {
  methods: {
    handleSubmittedData(data) {
      // 处理表单数据
      // ...
    }
  }
}
</script>

In this example, we define an event handler in the parent component named "handleSubmittedData" method and pass it to the child component named "child-component". When a child component fires a custom event called "submitted", the event is passed up the component hierarchy until it is caught by the parent component.

Summary

In Vue, custom events are a way to easily implement communication between components. We can use the $emit() method in the Vue instance to trigger custom events, and use the v-on directive in the component that needs to receive the event to listen for the event. Additionally, custom events can be passed up the component hierarchy, allowing parent components to listen to events from child components and handle events directly.

The above is the detailed content of How to use custom events to implement communication between components in Vue. For more information, please follow other related articles on the PHP Chinese website!