父子组件通信$emit

<!-- ChildComponent.vue -->
<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      // 触发名为 'message' 的自定义事件，并传递数据 'Hello from Child!'
      this.$emit('message', 'Hello from Child!');
    },
  },
};
</script>

2、父组件中监听自定义事件：
在父组件中，使用 v-on（或简写为 @）指令监听子组件触发的自定义事件。在事件处理函数中，可以获取到子组件传递的数据。

<!-- ParentComponent.vue -->
<template>
  <ChildComponent @message="handleMessage" />
  <p>{{ receivedMessage }}</p>
</template>

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

export default {
  data() {
    return {
      receivedMessage: '',
    };
  },
  components: {
    ChildComponent,
  },
  methods: {
    handleMessage(message) {
      // 接收来自子组件的数据
      this.receivedMessage = message;
    },
  },
};
</script>

在这个例子中，子组件 ChildComponent 中的按钮被点击时，会触发名为 message 的自定义事件，并传递字符串 ‘Hello from Child!’。父组件 ParentComponent 监听到这个事件，在事件处理函数 handleMessage 中接收到子组件传递的数据，然后更新 receivedMessage 的值。

通过这种方式，子组件就可以将信息传递给父组件，实现了父子组件之间的通信。