快捷導(dǎo)航

Vue3中如何修改父組件傳遞到子組件中的值(全網(wǎng)少有!)

更新時(shí)間：2023年04月15日 11:53:37 作者：喝西瓜汁的兔嘰Yan

大家都知道,vue是具有單向數(shù)據(jù)流的傳遞特性,下面這篇文章主要給大家介紹了關(guān)于Vue3中如何修改父組件傳遞到子組件中值的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

Vue3中修改父組件傳遞到子組件中的值

1.大家都知道，vue是具有單向數(shù)據(jù)流的傳遞特性。當(dāng)你在子組件中修改父組件傳遞過(guò)來(lái)的數(shù)據(jù)的時(shí)候，控制臺(tái)就會(huì)報(bào)出錯(cuò)誤，說(shuō)不讓你對(duì)父組件傳遞的值進(jìn)行修改。
2.那么，尤大大為了解決這個(gè)問(wèn)題，在vue3的時(shí)候給我們提供了一個(gè)新的思路:v-model來(lái)實(shí)現(xiàn)父?jìng)髯?，并且子也可以修改父組件傳遞過(guò)來(lái)的數(shù)據(jù)。
3. 都讀到這里了，我給大家提供兩個(gè)修改父組件數(shù)據(jù)的思路（不僅限于vue3）:
法一：使用v-model進(jìn)行父?jìng)髯?，并且子組件修改父組件傳遞的值。
法二：使用Pinia或者vuex進(jìn)行狀態(tài)管理，然后進(jìn)行數(shù)據(jù)的修改。

自定義組件上使用v-model

父組件：

//此處是父組件中引入的子組件
<ChildrenView  v-model:num="num"/>

//定義數(shù)據(jù)
let num=ref(10);//定義num為10,傳遞給子組件

子組件:

<script setup>
	//子組件接收父組件傳遞過(guò)來(lái)的數(shù)據(jù)
	let props=defineProps({
		num:number;
	});
	console.log(props.num)//接收過(guò)來(lái)的數(shù)據(jù)num=10

	//重點(diǎn):開始修改子組件傳遞過(guò)來(lái)的num
	//1.引入我們的 **emit("自定義事件名",傳遞的數(shù)據(jù))** 函數(shù)，用來(lái)觸發(fā)自定義事件
	//2.使用emit()
	let emit=defineEmits(["update:num"]);//自定義的更新num事件
	//3.假設(shè)子組件里的有個(gè)按鈕，執(zhí)行的是這個(gè)changeNum事件
	let changeNum=()=>{
		emit("update:num",100);//觸發(fā)自定義事件，將父組件的num修改為100
	}
	
</script>

注意:
1.大家肯定有疑惑，這個(gè)emit()不就是子傳父的時(shí)候用的嗎，那么父組件上不應(yīng)該去綁定這個(gè)update:num嗎？
如下:父組件:<ChildrenView v-model:num="num" @update:num="changeNum" >
是的，確實(shí)是子傳父用的，但是你沒必要再去綁定@update:num了。
why?
因?yàn)橛却蟠笤谧远x組件上使用v-model自己已經(jīng)做過(guò)了處理，所以你只需要emit(“定義update:值”,數(shù)據(jù))即可修改父組件的值了

總結(jié)：

使用步驟如下:

1.父組件中的子組件綁定自定義屬性num

2.子組件接收props的num

3.子組件定義emit事件,事件名為update:值 —defineEmits([“update:num”])

4.執(zhí)行emit() ----emit(“自定義事件update:num”,子傳父的值)

//此處的"值"要和v-model:值 保持一致,即:v-model:num   emit("update:num")
let emit=defineEmits(["update:值"])  
emit("update:值",子傳父的數(shù)據(jù)),執(zhí)行即修改了父組件傳遞過(guò)來(lái)的值

到此這篇關(guān)于Vue3中如何修改父組件傳遞到子組件中值的文章就介紹到這了,更多相關(guān)Vue3修改父組件傳遞到子組件的值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: