vue3父组件触发子组件事件

在Vue3中，父组件想要触发子组件的事件通常有两种方式：

1. **通过`v-on`指令**：父组件可以在需要的地方使用`<child-component @child-event="parentMethod">`这样的语法，其中`@child-event`是子组件的自定义事件名，`parentMethod`是父组件中处理该事件的方法。

<template>
  <div>
    <button @click="callChildEvent">点击触发子组件事件</button>
    <child-component :someProp="propValue" @child-event="handleChildEvent"></child-component>
  </div>
</template>

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

const propValue = "hello";
const handleChildEvent = (eventData) => {
  // 处理接收到的子组件数据
  console.log(eventData);
};

function callChildEvent() {
  // 触发子组件的事件
  const childInstance = getCurrentInstance().proxy.$refs.childComponent;
  if (childInstance) {
    childInstance.$emit('child-event', '从父组件传递的数据');
  }
}
</script>

2. **通过`$emit`手动触发**：如果子组件已经暴露了事件发射函数，例如`$emit('child-event')`，父组件可以直接访问子组件实例并调用这个方法。

// 父组件模板
<button @click="callEmitEvent">点击触发事件</button>

// 父组件 script setup
...
function callEmitEvent() {
  childComponent.$emit('child-event', { someData: 'from parent' });
}
...