vue3中父组件如何向子组件传递事件

在Vue 3中，可以使用`$emit`方法来实现父组件向子组件传递事件。下面是一个简单的示例:

首先，在父组件中定义一个方法，并在需要的时候调用`$emit`方法触发事件:

<template>
  <div>
    <button @click="triggerEvent">触发事件</button>
    <ChildComponent @custom-event="handleEvent" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default defineComponent({
  components: {
    ChildComponent,
  },
  methods: {
    triggerEvent() {
      this.$emit('custom-event', /* 传递的数据 */);
    },
    handleEvent(data) {
      // 处理事件的逻辑
    },
  },
});
</script>

在父组件中，我们定义了一个方法`triggerEvent`，当按钮被点击时调用该方法。在该方法中，使用`this.$emit`来触发自定义事件，并可以选择传递一些数据作为参数。

然后，在子组件中使用`$emit`绑定父组件传递的事件:

<template>
  <div>
    <!-- ... 子组件的内容 ... -->
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  methods: {
    // 子组件中触发事件的方法
    triggerEvent() {
      this.$emit('custom-event', /* 传递的数据 */);
    },
  },
});
</script>

在子组件中，我们定义了一个方法`triggerEvent`，当需要触发事件时，调用`this.$emit`来触发父组件传递的事件，并可以选择传递一些数据。

父组件中使用`@custom-event`来监听子组件触发的事件，并在`handleEvent`方法中处理事件的逻辑。

这样就实现了父组件向子组件传递事件的功能。当父组件中的按钮被点击时，会触发子组件中的自定义事件，并可以在父组件中处理相应的逻辑。