vue3 父子组件emit

在 Vue 3 中，你可以使用 `emit` 在父组件和子组件之间进行通信。以下是一个示例：

在父组件中，你可以使用 `v-on` 或简写的 `@` 来监听子组件触发的事件，并执行相应的方法：

<template>
  <div>
    <child-component @custom-event="handleEvent"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleEvent(payload) {
      // 处理子组件触发的事件
      console.log(payload);
    },
  },
};
</script>

在子组件中，你可以使用 `emits` 属性来声明可以触发的事件：

<template>
  <button @click="emitEvent">点击触发事件</button>
</template>

<script>
export default {
  emits: ['custom-event'], // 声明可以触发的事件
  methods: {
    emitEvent() {
      this.$emit('custom-event', { data: '传递的数据' });
    },
  },
};
</script>

当子组件中的按钮被点击时，会触发 `custom-event` 事件，并将 `{ data: '传递的数据' }` 作为参数传递给父组件的 `handleEvent` 方法。你可以根据实际需求自定义事件名称和传递的数据。