vue3父组件控制子组件触发事件

在 Vue 3 中，父组件可以通过 props 将事件传递给子组件，并且子组件可以通过 $emit 方法触发事件，从而控制父组件。

首先，父组件需要定义一个方法来处理子组件触发的事件。可以在父组件的 methods 中定义这个方法，在方法内部进行相应的处理逻辑。例如：

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

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleEvent() {
      // 处理事件的逻辑
    }
  }
}
</script>

然后，在子组件中，通过 $emit 方法触发自定义的事件。可以在子组件的 methods 中调用 $emit 方法来触发事件。例如：

<template>
  <button @click="triggerEvent">触发事件</button>
</template>

<script>
export default {
  methods: {
    triggerEvent() {
      this.$emit('customEvent');
    }
  }
}
</script>

这样，当子组件的按钮被点击时，会触发 customEvent 事件，并且父组件中的 handleEvent 方法会被调用，从而实现了父组件控制子组件触发事件的效果。