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