Vue component communication: using $on for custom event listening

Vue component communication: Use $on for custom event listening

In Vue, components are independent, and each component has its own life cycle and data. However, in the actual development process, communication between components is inevitable. Vue provides a very flexible and efficient way of component communication: custom event listening.

Vue’s custom event listening mechanism is implemented based on the publish-subscribe model. You can listen to a custom event in one component by using the $on method of the Vue instance, and trigger the event in other components through the $emit method. Below we will introduce in detail how to use $on for custom event monitoring.

First, let’s create a simple parent-child component example. The parent component is App.vue and the child component is Child.vue.

App.vue:

<template>
  <div>
    <h2>App Component</h2>
    <button @click="notifyChild">通知子组件</button>
    <Child></Child>
  </div>
</template>

<script>
  import Child from './Child.vue';

  export default {
    name: 'App',
    components: {
      Child
    },
    methods: {
      notifyChild() {
        this.$emit('customEvent', 'Hello Child Component!');
      }
    }
  }
</script>

Child.vue:

<template>
  <div>
    <h2>Child Component</h2>
    <p>{{ message }}</p>
  </div>
</template>

<script>
  export default {
    name: 'Child',
    data() {
      return {
        message: ''
      }
    },
    mounted() {
      this.$parent.$on('customEvent', this.handleCustomEvent);
    },
    beforeDestroy() {
      this.$parent.$off('customEvent', this.handleCustomEvent);
    },
    methods: {
      handleCustomEvent(message) {
        this.message = message;
      }
    }
  }
</script>

In the parent component App.vue, we trigger a custom event by clicking the button customEvent, and pass a message to the child component.

In the child component Child.vue, we use the this.$parent.$on method in the mounted life cycle hook function to listen to the custom event in the parent componentcustomEvent. And use the this.$parent.$off method in the beforeDestroy life cycle hook function to cancel the listening. In method handleCustomEvent, we assign the message passed by the parent component to the message of the child component.

Through the above code example, we have achieved communication between parent and child components. When the button in the parent component is clicked, the child component will receive the message passed by the parent component and display it.

In addition to communication between parent and child components, we can also establish communication between any two components. Just listen to the custom event using this.$on in one of the components, and then use this.$emit to trigger the event in the other component.

In summary, through Vue’s $on method for custom event monitoring, we can achieve flexible and efficient component communication. Whether it is communication between parent and child components or communication between any two components, it can be handled easily. I hope this article will help you with component communication issues in Vue development.

The above is the detailed content of Vue component communication: using $on for custom event listening. For more information, please follow other related articles on the PHP Chinese website!