错误代码:
子组件:
<template>
<div></div>
</template>
<script setup lang="ts">
// 引入defineExpose 将数据暴露
import {defineExpose} from 'vue'
// 定义一个变量
let test = {name: 'xiaoman'}
// 暴露给父组件
defineExpose({test})
</script>
父组件接收:
<template>
<Child ref="child" ></Child>
</template>
<script setup lang="ts">
import Child from './Child'
import { ref, onMounted } from 'vue'
const childComp = ref<InstanceType<typeof Child>>()
onMounted(() => {
console.log(childComp.value) // undefined
console.log(childComp.value.test, '???') // 报错:找不到test变量
})
</script>
<style scoped>
</style>
在onMounted里面获取不到子组件实例和暴露出来的对象
后来找到了问题:
接收子组件实例的变量一定要和子组件标签里面ref的赋值一致!!!
接收子组件实例的变量一定要和子组件标签里面ref的赋值一致!!!
接收子组件实例的变量一定要和子组件标签里面ref的赋值一致!!!
改正后的父组件代码:
<template>
<Child ref="child" :title="name" :arr="[1,2,3]" @on-click="getName" ></Child>
</template>
<script setup lang="ts">
import Child from './Child'
import { ref, onMounted } from 'vue'
// child这个变量必须和子组件里面的ref定义的一模一样
const child = ref<InstanceType<typeof Child>>()
onMounted(() => {
console.log(child.value)
console.log(child.value.test, '???')
})
</script>
<style scoped>
</style>
也能打印出值了:
浅浅总结一下Vue3 setup语法糖下父组件用ref无法获取到子组件的原因:
1.子组件的数据没有用defineExpose暴露
2.子组件标签的ref的赋值和父组件赋值变量时的命名不一致
3.没有用.value获取
4.没有在onMounted获取,组件还没有挂载完毕