在vue3中,我们经常会使用defineProps用给父组件传值给子组件,但是我们会发现props里接收父组件传过来的值,在子组件打印不出来,但是在template又可以显示出来,这样会导致传过来的值在子组件里面无法使用
如:传过来的值是flag
解决办法:子组件通过defineExpose,暴露需要flag的方法
父组件通过ref在父组件调用子组件的方法
父组件
<SpuForm ref="needsData" />
const needsData = ref<any>() // 定义子组件实例,名称要和ref相同, 父组件调用子组件方法
needsData.value.spuGetTrademark(flag) // 调用子组件的方法
子组件
const spuGetTrademark = async (flag: boolean) => {
console.log(flag)
}
// 将方法暴露给父组件
defineExpose({
spuGetTrademark
})