vue3父组件传事件给子组件

在Vue 3中，父组件可以通过props将事件传递给子组件。首先，在父组件中定义一个函数来处理事件，然后将该函数通过props传递给子组件。子组件可以在需要的时候通过$emit方法触发父组件传递的事件。

以下是一个示例：

<!-- 父组件 -->
<template>
  <div>
    <child-component @event="handleEvent" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleEvent() {
      // 处理事件逻辑
      console.log('事件被触发');
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <button @click="$emit('event')">
    触发事件
  </button>
</template>

在上面的示例中，父组件通过在子组件上使用`@event`监听子组件触发的事件，并将其绑定到`handleEvent`方法。当子组件中的按钮被点击时，通过`$emit('event')`触发父组件传递的事件处理逻辑。

注意：在Vue 3中，`$emit`方法用于触发父组件传递的事件，而不是像Vue 2中使用`this.$emit`。