【解决vue3父组件通过ref调用子组件方法undefind问题】
解决vue3父组件通过ref调用子组件方法undefind问题
·
项目场景:
项目相关背景:
是一个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()
}
更多推荐
已为社区贡献1条内容
所有评论(0)