vue父組件傳值子組件報錯Avoid?mutating?a?prop?directly解決
更新時間：2023年09月21日 14:09:43 作者：蘇本的書柜
這篇文章主要為大家介紹了vue父組件傳值子組件報錯Avoid?mutating?a?prop?directly解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
原因
因為在子組件的過程中,對父組件傳過來的值進行了賦值操作,破壞了vue的單向數(shù)據(jù)流傳遞的,所以報錯
改正方法
兩種方式
- 1. 用 $emit(‘update:xxx’) 改變。這種方式并沒有改變單向數(shù)據(jù)流的特性
- 2. 將prop定義為對象，改變對象中的值不會觸發(fā)報錯，頁面也能正常渲染、更新。但是如果你對數(shù)據(jù)流不是門清，還是別這么做了。,也就是傳入一個對象,然后改變對象,這樣不會報錯.
props實現(xiàn)雙向數(shù)據(jù)流的一個方式
Vue.component("switchbtn", {
template: "<div @click='change'>{{myResult?'開':'關(guān)'}}</div>",
props: ["result"],
data: function () {
return {
myResult: this.result//①創(chuàng)建props屬性result的副本--myResult
};
},
watch: {
result(val) {
this.myResult = val;//②監(jiān)聽外部對props屬性result的變更，并同步到組件內(nèi)的data屬性myResult中
},
myResult(val){
//xxcanghai 小小滄海 博客園
this.$emit("on-result-change",val);//③組件內(nèi)對myResult變更后向外部發(fā)送事件通知
}
},
methods: {
change() {
this.myResult = !this.myResult;
}
}
});
new Vue({
el: "#app",
data: {
result: true
},
methods: {
change() {
this.result = !this.result;
},
onResultChange(val){
this.result=val;//④外層調(diào)用組件方注冊變更方法，將組件內(nèi)的數(shù)據(jù)變更，同步到組件外的數(shù)據(jù)狀態(tài)中
}
}
});以上就是vue父組件傳值子組件報錯Avoid mutating a prop directly 解決的詳細內(nèi)容，更多關(guān)于vue父子組件傳值報錯解決的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
關(guān)于Element UI table 順序拖動方式
這篇文章主要介紹了關(guān)于Element UI table 順序拖動方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue調(diào)用本地緩存方式(監(jiān)視數(shù)據(jù)變更)
這篇文章主要介紹了vue調(diào)用本地緩存方式(監(jiān)視數(shù)據(jù)變更)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue+element table表格實現(xiàn)動態(tài)列篩選的示例代碼
這篇文章主要介紹了vue+element table表格實現(xiàn)動態(tài)列篩選的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要介紹了vue如何給組件動態(tài)綁定不同的事件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue表單提交點擊事件只允許點擊一次的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
Vue3+TypeScript封裝axios并進行請求調(diào)用的實現(xiàn)
這篇文章主要介紹了Vue3+TypeScript封裝axios并進行請求調(diào)用的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要為大家詳細介紹了Mint UI實現(xiàn)A-Z字母排序的城市選擇列表，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
v-model 是 vue.js 提供的語法糖，根據(jù)不同的表單控件監(jiān)聽不同的事件，實現(xiàn)對表單控件的數(shù)據(jù)雙向綁定。這篇文章主要介紹了vue 表單輸入格式化中文輸入法異常,需要的朋友可以參考下2018-05-05
Vue3使用customRef封裝防抖函數(shù)的方法詳解
防抖函數(shù)的作用是高頻率觸發(fā)的事件,在指定的單位時間內(nèi),只響應(yīng)最后一次,如果在指定的時間內(nèi)再次觸發(fā),則重新計算時間,本文將給大家詳細的介紹一下Vue3使用customRef封裝防抖函數(shù)的方法,需要的朋友可以參考下2023-09-09
Vue動態(tài)加載圖片在跨域時無法顯示的問題及解決方法
這篇文章主要介紹了解決VUE動態(tài)加載圖片在跨域時無法顯示的問題,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-03-03