vue3如何在父組件修改子組件的值
更新時(shí)間：2025年08月04日 09:06:17 作者：下雪天的夏風(fēng)
這篇文章主要介紹了vue3如何在父組件修改子組件的值實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
在父組件修改子組件的值
主要用到defineExpose
vue3官方文檔中說：
使用<script setup>的組件是默認(rèn)關(guān)閉的——即通過模板引用或者 $parent 鏈獲取到的組件的公開實(shí)例，不會(huì)暴露任何在<script setup> 中聲明的綁定。
換句話說
父組件通過 ref 的方式，是不能直接訪問到子組件數(shù)據(jù)的。需要子組件通過 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: '下雪天的夏風(fēng)',
want: '求關(guān)注'
}
onMounted(() => {
// 修改子組件數(shù)據(jù)
child.value.setFirstData(parentData)
// 獲取子組件數(shù)據(jù)
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>
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue在history模式下打包部署問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03
這篇文章主要介紹了Vue?WebPack忽略指定文件或目錄方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
antdv的table因數(shù)據(jù)量過大導(dǎo)致的卡頓問題及解決
這篇文章主要介紹了antdv的table因數(shù)據(jù)量過大導(dǎo)致的卡頓問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
element表格行列的動(dòng)態(tài)合并示例詳解
這篇文章主要為大家介紹了element表格行列的動(dòng)態(tài)合并示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
在使用vuex的時(shí)候出現(xiàn)commit未定義錯(cuò)誤的解決
這篇文章主要介紹了在使用vuex的時(shí)候出現(xiàn)commit未定義錯(cuò)誤的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家詳細(xì)介紹了vue3.0實(shí)現(xiàn)考勤日歷組件使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了解決vuex改變了state的值,但是頁面沒有更新的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了keep-alive保持組件狀態(tài)的方法，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下2020-12-12
使用vue項(xiàng)目配置多個(gè)代理的注意點(diǎn)
這篇文章主要介紹了使用vue項(xiàng)目配置多個(gè)代理的注意點(diǎn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-07-07
vue-cli中實(shí)現(xiàn)響應(yīng)式布局的方法
這篇文章主要介紹了vue-cli中實(shí)現(xiàn)響應(yīng)式布局的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03