Vue component communication: using event listeners for data transfer

Vue component communication: using event listeners for data transfer

In Vue development, communication between components is a common problem. Vue provides a variety of optional communication methods, one of the commonly used methods is to use event listeners for data transfer. In this article, we will introduce the method of using event listeners for component communication and give corresponding code examples.

1. Parent component listens to child component events

In Vue, the child component can trigger a custom event through the $emit method and pass it Parameters implement data transfer. The parent component can listen to the events of the child component through the v-on directive and obtain the passed data in the callback function.

In the following example, we create a parent component ParentComponent and a child component ChildComponent. A button is defined in the child component. When the button is clicked, a custom event named childEvent will be triggered and a parameter message will be passed. The parent component listens to the childEvent event of the child component through the v-on instruction, and obtains the passed parameters in the callback function.

<template>
  <div>
    <child-component v-on:childEvent="handleChildEvent"></child-component>
    <p>从子组件接收到的数据：{{ receivedData }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedData: ''
    };
  },
  methods: {
    handleChildEvent(data) {
      this.receivedData = data;
    }
  }
};
</script>

<template>
  <div>
    <button @click="triggerEvent">触发事件</button>
  </div>
</template>

<script>
export default {
  methods: {
    triggerEvent() {
      this.$emit('childEvent', 'Hello, Vue!');
    }
  }
};
</script>

When the button in the child component is clicked, the parent component will receive the passed parameters Hello, Vue! and display them on the page.

2. Child components listen to parent component events

In addition to parent components listening to child component events, child components can also listen to parent components through the $on method Triggered event. This method is suitable for scenarios where child components need to actively obtain parent component data.

In the following example, we modified the previous code so that the parent component triggers a parentEvent event during initialization and passes a parameter data. The child component listens to the parentEvent event of the parent component through the $on method, and obtains the passed data in the callback function.

<!-- 父组件 -->
<template>
  <div>
    <child-component></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  mounted() {
    this.$emit('parentEvent', 'Hello, Vue!');
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>从父组件接收到的数据：{{ receivedData }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      receivedData: ''
    };
  },
  mounted() {
    this.$parent.$on('parentEvent', this.handleParentEvent);
  },
  methods: {
    handleParentEvent(data) {
      this.receivedData = data;
    }
  }
};
</script>

In this example, the parent component triggers the parentEvent event in the mounted hook and passes the parameters Hello, Vue!. The child component listens to the parentEvent event of the parent component through the $on method, and obtains the passed data in the callback function.

Through the above two methods, we can achieve flexible communication in Vue components, so that components can transfer data to each other and interact. You can choose the appropriate method for component communication based on specific business scenarios to improve the organization and maintainability of your code.

Summary:

This article introduces the method of using event listeners for component communication and gives corresponding code examples. Whether the parent component listens to child component events, or the child component listens to parent component events, these are common component communication methods in Vue. In this way, we can achieve flexible data transfer and component interaction, providing more possibilities for Vue development.

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