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

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

父页面

<template>
  <div>
    <!-- 第四步：页面使用子组件，并添加 ref 属性，注意ref属性不能和子组件重名 -->
    <role-card ref="roleRef"></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()

子组件

<template>
  <div>
    这是一个子组件
  </div>
</template>

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


// 第一步：子组件中声明方法
const initData = async () => {
    console.log('初始化子组件数据')
}

// 第二步 重要 ：使用 defineExpose 声明父组件要调用的方法
defineExpose({
  initData
})

</script>

很多人漏掉了第二点，导致页面报错：XXX  is not a function

2023-03-31 日新增补充：注意第五步：let roleRef = ref() 不要放置于函数内部