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ò)，頁面也能正常渲染、更新。但是如果你對(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)文章
這篇文章主要介紹了在 Vue 中使用 JSX 及使用它的原因淺析，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02
本文深入探討了Vue3中新特性shallowReactive的使用和原理,shallowReactive是創(chuàng)建淺響應(yīng)式對(duì)象的API,只對(duì)對(duì)象的第一層屬性進(jìn)行響應(yīng)式轉(zhuǎn)換,不對(duì)嵌套對(duì)象處理,有助于性能優(yōu)化和狀態(tài)管理,同時(shí)也指出了shallowReactive在使用中的注意事項(xiàng)2024-10-10
這篇文章主要介紹了Vue實(shí)現(xiàn)直播功能,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-10-10
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)前端分頁完整代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要介紹了vue時(shí)間選擇控件的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue中render函數(shù)和h函數(shù)以及jsx的使用方式
這篇文章主要介紹了vue中render函數(shù)和h函數(shù)以及jsx的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
基于vue 動(dòng)態(tài)加載圖片src的解決方法
下面小編就為大家分享一篇基于vue 動(dòng)態(tài)加載圖片src的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家介紹了vue3中element的Form表單用法實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
vue3實(shí)現(xiàn)圖片瀑布流展示效果實(shí)例代碼
這篇文章主要介紹了vue3實(shí)現(xiàn)圖片瀑布流展示效果的相關(guān)資料,該組件可以調(diào)整列數(shù)、支持懶加載、自定義每頁滾動(dòng)數(shù)量、高度和點(diǎn)擊效果,作者展示了組件的效果,并詳細(xì)說明了實(shí)現(xiàn)方法,包括組件的創(chuàng)建和依賴的工具庫,需要的朋友可以參考下2024-11-11
el-form組件使用resetFields重置失效的問題解決
用el-form寫了包含三個(gè)字段的表單,使用resetFields方法進(jìn)行重置,發(fā)現(xiàn)點(diǎn)擊重置或要清空校驗(yàn)時(shí)是失效的,所以本文給大家介紹了el-form組件使用resetFields重置失效的問題解決,需要的朋友可以參考下2023-12-12