vue3如何在父组件修改子组件的值
作者：下雪天的夏风
这篇文章主要介绍了vue3如何在父组件修改子组件的值实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
在父组件修改子组件的值
主要用到defineExpose
vue3官方文档中说：
使用<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>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。