vue组件通信

<template>
  <div>
    <ParentComponent />
  </div>
</template>

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

export default {
  components: {
    ParentComponent
  }
};
</script>

ParentComponent.vue

<template>
  <div>
    <h2>Parent Component</h2>
    <ChildComponent :message="parentMessage" @childEvent="handleChildEvent" />
    <p>Message from Child: {{ childMessage }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent',
      childMessage: ''
    };
  },
  methods: {
    handleChildEvent(message) {
      this.childMessage = message;
    }
  }
};
</script>

ChildComponent.vue

<template>
  <div>
    <h3>Child Component</h3>
    <p>{{ message }}</p>
    <button @click="sendMessageToParent">Send Message to Parent</button>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  },
  methods: {
    sendMessageToParent() {
      this.$emit('childEvent', 'Hello from Child');
    }
  }
};
</script>

解释说明

1. 父组件向子组件传递数据：通过props，父组件可以将数据传递给子组件。在ParentComponent中，parentMessage作为props传递给ChildComponent。

2. 子组件向父组件发送事件：通过$emit，子组件可以触发自定义事件并将数据传递给父组件。在ChildComponent中，点击按钮时会触发childEvent事件，并将消息传递给父组件。

3. 父组件监听子组件事件：父组件可以通过@childEvent监听子组件的自定义事件，并在事件触发时执行相应的方法。在ParentComponent中，handleChildEvent方法会在接收到子组件的消息后更新childMessage。

这种通信方式是Vue组件之间常见的通信模式，适用于父子组件之间的数据传递和事件处理。