vue3_父组件调用子组件的某个方法

父组件：

<template>
  <div class="father">
    <el-button @click="handle">触发子组件事件</el-button>
    <child ref="children"/>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import child from './child.vue';

const children = ref()
function handle(){
    children.value.clickChild()
}
</script>

子组件：

<template>
  <div class="child">
    我是子组件
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'

defineExpose({clickChild})
function clickChild(){
    console.log('我被触发了！');
}
</script>

使用 <script setup> 的组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例，不会暴露任何在 <script setup> 中声明的绑定。
可以通过 defineExpose 编译器宏来显式指定在