vue3.0父组件触发子组件的事件

### 实现父组件触发子组件事件的方法

在 Vue 3 中，实现父组件触发子组件中的特定方法或逻辑可以通过 `ref` 来获取子组件实例并调用其公开的方法。这涉及到使用 `<script setup>` 或者普通的选项 API 方式来定义和暴露这些方法。

#### 使用 ref 获取子组件实例

为了使父组件能够访问到子组件内部的功能，在子组件中需通过 `defineExpose` 明确指出哪些属性或函数可以被外界访问[^1]：

// 子组件 (ChildComponent.vue)
<script>
export default {
    setup(props, { expose }) {
        function childMethod() {
            console.log('子组件的方法被执行');
        }

        // 只有声明在此处的成员才会对外可见
        expose({
            childMethod,
        });

        return {};
    },
};
</script>

<template>
<div>这里是子组件的内容。</div>
</template>

接着，在父组件里利用 `ref` 属性绑定一个变量名用于保存对子组件 DOM 节点的引用，并通过该引用去调用之前已经暴露出的方法[^2]：

<!-- 父组件 -->
<template>
  <div>
    <!-- 将子组件实例赋值给名为 "childRef" 的响应式变量 -->
    <ChildComponent ref="childRef"></ChildComponent>
    
    <button @click="triggerChildEvent">点击以触发子组件内的方法</button>
  </div>
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './path/to/ChildComponent';

export default {
  components: {
    ChildComponent,
  },

  setup() {
      const childRef = ref(null);

      function triggerChildEvent(){
          if(childRef.value){
              childRef.value.childMethod();
          }
      };

      return{
          childRef,
          triggerChildEvent
      };
  }
}
</script>

上述代码展示了如何设置子组件以便它可以安全地将其某些功能开放出来供外部调用；同时也解释了怎样在一个按钮点击事件处理器内操作这个引用从而间接执行目标动作[^3]。