使用
<script setup>
的组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例,不会暴露任何在<script setup>
中声明的绑定。
换句话说:父组件通过 ref 的方式,是不能直接访问到子组件数据的。需要子组件通过 defineExpose 暴露出来才可以。
<!--父组件-->
<template>
<Children ref="child" />
</template>
<script setup>
import { ref, onMounted } from 'vue'
import Children from './child.vue'
const child = ref(null)
const parentData = {
name: '下雪天的夏风',
want: '求关注'
}
onMounted(() => {
// 修改子组件数据
child.value.setFirstData(parentData)
// 获取子组件数据
const { getFirstData, secondData } = child.value
})
</script>
<!--子组件-->
<template>
<div></div>
</template>
<script setup>
import { ref, defineExpose } from 'vue'
const firstData = ref(null)
const secondData = ref('second')
defineExpose({
setFirstData(res){
firstData.value = res
},
getFirstData(){
return firstData.value
},
secondData
})
</script>