vue3如何在父組件修改子組件的值
更新時間：2025年08月04日 09:06:17 作者：下雪天的夏風(fēng)
這篇文章主要介紹了vue3如何在父組件修改子組件的值實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
在父組件修改子組件的值
主要用到defineExpose
vue3官方文檔中說：
使用<script setup>的組件是默認(rèn)關(guān)閉的——即通過模板引用或者 $parent 鏈獲取到的組件的公開實例，不會暴露任何在<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é)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue-router的鉤子函數(shù)用法,結(jié)合實例形式分析了vue路由鉤子分類及vue-router鉤子函數(shù)相關(guān)使用技巧,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了VUE組件 之 Drawer 抽屜 ，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
vue中監(jiān)控滾動事件可以直接在mounted中綁定滾動事件,然后在銷毀前解綁滾動事件,本文通過實例代碼介紹vue實現(xiàn)滾動底部加載下一頁指令的過程,感興趣的朋友跟隨小編一起看看吧2023-10-10
vue生成token保存在客戶端localStorage中的方法
本篇文章主要介紹了vue生成token保存在客戶端localStorage中的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了vue項目中Token的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-09-09
vue如何解決sass-loader的版本過高導(dǎo)致的編譯錯誤
這篇文章主要介紹了vue如何解決sass-loader的版本過高導(dǎo)致的編譯錯誤問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要介紹了vue中標(biāo)簽自定義屬性的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
今天小編就為大家分享一篇vue.js的簡單自動求和計算實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了Vue3?props的使用詳解,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-10-10
詳解vue數(shù)據(jù)渲染出現(xiàn)閃爍問題
本篇文章主要介紹了vue數(shù)據(jù)渲染出現(xiàn)閃爍問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06