项目场景：

项目相关背景：是一个vue3写的审批类的移动端

项目场景：对待审批列表进行全选反选操作，审批列表是子组件，用的vant-ui框架，全选反选逻辑在子组件执行，触发事件在父组件执行。

---

问题描述

项目中遇到的问题：

在vue3 < script setup/>语法糖中使用ref在父组件中触发子组件事件。

子组件代码：

//声明函数
const checkAll = () => {
     checkboxGroup.value.toggleAll(true);
}
const toggleAll = () => {
    checkboxGroup.value.toggleAll();
}

在语法糖中，setup是封闭的，不会将子组件事件暴露出来，所以要用defineExpose()，将需要在父组件调用的函数暴露出去。

defineExpose({
    checkAll,
    toggleAll
})

父组件代码

// 导入 ref
import { ref } from 'vue'

// 父组件通过ref生声明调用的子组件
<approve-item ref="approveitem" v-if="approveList[item.key] && approveList[item.key].length > 0"
            :approveList="approveList[item.key]" @getCheckedList="getCheckedList"></approve-item>

使用 const approveitem = ref(null) 获取不到子组件，调用方法一直undefind，改用proxy.$refs，才获取到了子组件，并成功调用子组件方法。

//全选反选
const { proxy } = getCurrentInstance();
// const approveitem = ref(null) // undefind
function getcheckAll(){ //全选
  // approveitem.value.checkAll() // 调用undefind
  proxy.$refs.approveitem[0].checkAll()
}
function gettoggleAll(){ //反选
  proxy.$refs.approveitem[0].toggleAll()
}