vue3 setup 父页面调用子组件中方法

vue3 中父组件直接调用子组件，步骤如下：

父页面（ref）

<template>
  <div>
    <role-card ref="roleRef" searchForm='123'></role-card>
  </div>
</template>
<script lang="ts" setup>
import {ref,reactive, Ref} from 'vue'
 
//父页面引入子组件
import roleCard from "./role-card.vue";
 
//获取页面的ref属性，用同名属性值接收
let roleRef = ref()
 
//使用 [ref].value 调用子组件中的方法
roleRef.value.initData()

子组件（defineExpose ）

<template>
  <div>
    这是一个子组件
  </div>
</template>
 
<script setup lang="ts">
import { ref, Ref, reactive } from 'vue'

interface Props {
    searchForm?: any;
}
let props = withDefaults(defineProps<Props>(), {
    searchForm: () => {},
});
 
// 第一步：子组件中声明方法
const initData = async () => {
    console.log('初始化子组件数据')
}
 
// 第二步 重要 ：使用 defineExpose 声明父组件要调用的方法
defineExpose({
  initData
})
 
</script>