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

Posted on by

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

1.大傢都知道，vue是具有單向數據流的傳遞特性。當你在子組件中修改父組件傳遞過來的數據的時候，控制臺就會報出錯誤，說不讓你對父組件傳遞的值進行修改。
2.那麼，尤大大為瞭解決這個問題，在vue3的時候給我們提供瞭一個新的思路:v-model來實現父傳子，並且子也可以修改父組件傳遞過來的數據。
3. 都讀到這裡瞭，我給大傢提供兩個修改父組件數據的思路（不僅限於vue3）:
法一：使用v-model進行父傳子，並且子組件修改父組件傳遞的值。
法二：使用Pinia或者vuex進行狀態管理，然後進行數據的修改。

自定義組件上使用v-model

父組件：

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

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

子組件:

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

	//重點:開始修改子組件傳遞過來的num
	//1.引入我們的 **emit("自定義事件名",傳遞的數據)** 函數，用來觸發自定義事件
	//2.使用emit()
	let emit=defineEmits(["update:num"]);//自定義的更新num事件
	//3.假設子組件裡的有個按鈕，執行的是這個changeNum事件
	let changeNum=()=>{
		emit("update:num",100);//觸發自定義事件，將父組件的num修改為100
	}
	
</script>

註意:
1.大傢肯定有疑惑，這個emit()不就是子傳父的時候用的嗎，那麼父組件上不應該去綁定這個update:num嗎？
如下:父組件:<ChildrenView v-model:num="num" @update:num="changeNum" >
是的，確實是子傳父用的，但是你沒必要再去綁定@update:num瞭。
why?
因為尤大大在自定義組件上使用v-model自己已經做過瞭處理，所以你隻需要emit(“定義update:值”,數據)即可修改父組件的值瞭

總結：

使用步驟如下:

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

2.子組件接收props的num

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

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

//此處的"值"要和v-model:值 保持一致,即:v-model:num   emit("update:num")
let emit=defineEmits(["update:值"])  
emit("update:值",子傳父的數據),執行即修改瞭父組件傳遞過來的值

到此這篇關於Vue3中如何修改父組件傳遞到子組件中值的文章就介紹到這瞭,更多相關Vue3修改父組件傳遞到子組件的值內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：