#vue 父子组件 事件通信

<!-- ParentComponent.vue -->
<template>
  <div>
    <!-- 使用 ChildComponent，通过 props 传递数据和监听事件 -->
    <child-component :message="parentMessage" @child-event="handleChildEvent"></child-component>
  </div>
</template>

<script>
// 导入 ChildComponent 组件
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    // 父组件的数据
    return {
      parentMessage: 'Hello from parent'
    };
  },
  methods: {
    // 处理从子组件发来的事件
    handleChildEvent(eventData) {
      console.log('Received event from child component:', eventData);
    }
  }
};
</script>

=========================================================================================

<!-- ChildComponent.vue -->
<template>
  <div>
    <!-- 按钮触发事件 -->
    <button @click="sendEvent">Send Event</button>
  </div>
</template>

<script>
export default {
  props: ['message'], // 接收父组件传递的数据
  methods: {
    // 发送事件给父组件
    sendEvent() {
      const eventData = 'Hello from child';
      this.$emit('child-event', eventData); // 发送名为 'child-event' 的事件，并携带数据
    }
  }
};
</script>