vue中组件通信

<!-- ParentComponent.vue -->
<template>
  <div>
    <h1>父组件</h1>
    <p>从子组件接收到的消息: {{ messageFromChild }}</p>
    <ChildComponent @childMessage="handleChildMessage" />
  </div>
</template>

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

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      messageFromChild: ''
    };
  },
  methods: {
    handleChildMessage(message) {
      this.messageFromChild = message;
    }
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <h2>子组件</h2>
    <button @click="sendMessageToParent">发送消息给父组件</button>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  methods: {
    sendMessageToParent() {
      const message = '你好，父组件!';
      this.$emit('childMessage', message);
    }
  }
};
</script>

解释说明

1. 父组件 (ParentComponent.vue):

   • 父组件中包含一个子组件 ChildComponent。
   • 父组件通过事件监听器 @childMessage 监听子组件发出的事件，并在事件触发时调用 handleChildMessage 方法来更新 messageFromChild 数据属性。

2. 子组件 (ChildComponent.vue):

   • 子组件中有一个按钮，点击按钮时会调用 sendMessageToParent 方法。
   • sendMessageToParent 方法通过 $emit 触发自定义事件 childMessage，并将消息传递给父组件。

通过这种方式，子组件可以向父组件传递数据，实现组件间的通信。