vue中如何修改props傳進(jìn)來(lái)的值
眾所周知，vue是單向數(shù)據(jù)流，一般我們也不會(huì)在子組件里面修改父組件傳進(jìn)來(lái)的值，但總有需要修改的時(shí)候。
前段時(shí)間一個(gè)項(xiàng)目中有遇到上述情況，假設(shè)我直接傳進(jìn)來(lái)一個(gè)list， 當(dāng)時(shí)我直接在里面改了list，但是卻驚訝的發(fā)現(xiàn)沒(méi)有報(bào)錯(cuò)，以前好像有遇到直接修改拋出錯(cuò)誤的，但這次卻沒(méi)有，當(dāng)時(shí)也沒(méi)有多想，最近空閑下來(lái)又想了下，發(fā)現(xiàn)自己確實(shí)**了(此處省略?xún)勺謃)。原因如下：
因?yàn)槲覀鬟M(jìn)來(lái)的list是個(gè)數(shù)組，屬于引用類(lèi)型，修改子組件相當(dāng)于把父組件也同時(shí)修改了，所以沒(méi)有報(bào)錯(cuò)，如果是個(gè)基本類(lèi)型的數(shù)據(jù)直接修改那么vue會(huì)報(bào)錯(cuò)。
在子組件修改props的方法：
1. 子組件data中拷貝一份，注意引用類(lèi)型需要深拷貝，根據(jù)需求可以watch監(jiān)聽(tīng)
data() {
return {
newList: this.list.slice()
}
},
watch: {
list(newVal) {
this.newList = newVal
}
}2. 通過(guò)計(jì)算屬性修改
computed: {
nList() {
return this.list.filter(item => {
return item.isChecked
})
}
}3. 通過(guò)研究大佬們的寫(xiě)法又發(fā)現(xiàn)了一種修改方式： sync修飾符
父組件 傳進(jìn)去的時(shí)候加上 .sync
子組件 通過(guò)this.$emit(‘update:xxx’, params)
// 父組件
<todo-list :list.sync="list" />
// 子組件
methodName(index) {
this.$emit('update:list', this.newList)
}到此這篇關(guān)于vue中修改props傳進(jìn)來(lái)的值的文章就介紹到這了,更多相關(guān)vue修改Props值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue自定義組件雙向綁定實(shí)現(xiàn)原理及方法詳解
這篇文章主要介紹了Vue自定義組件雙向綁定實(shí)現(xiàn)原理及方法詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
vue中有一張響應(yīng)式系統(tǒng)的流程圖，vue會(huì)將模板語(yǔ)法編譯成render函數(shù)，通過(guò)render函數(shù)渲染生成Virtual?dom，但是官方并沒(méi)有對(duì)模板編譯有詳細(xì)的介紹，這篇文章帶大家一起學(xué)習(xí)下vue的模板編譯2023-07-07
這篇文章主要為大家詳細(xì)介紹了前端框架Vue.js構(gòu)建大型應(yīng)用的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
Vue3解決Mockjs引入后并訪問(wèn)404(Not Found) 的頁(yè)面報(bào)錯(cuò)問(wèn)題
mock.js:是一款模擬數(shù)據(jù)生成器,可以生成隨機(jī)數(shù)據(jù),攔截 Ajax 請(qǐng)求,使用mockjs模擬后端接口,可隨機(jī)生成所需數(shù)據(jù),模擬對(duì)數(shù)據(jù)的增刪改查,本文給大家介紹了Vue3解決Mockjs引入后并訪問(wèn)404(Not Found) 的頁(yè)面報(bào)錯(cuò)問(wèn)題,需要的朋友可以參考下2025-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)掃碼功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
淺談關(guān)于iview表單驗(yàn)證的問(wèn)題
這篇文章主要介紹了淺談關(guān)于iview表單驗(yàn)證的問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
本文主要介紹了Vue實(shí)現(xiàn)登錄功能全套詳解（含封裝axios），文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要為大家詳細(xì)介紹了Vue中的自定義渲染器和異步渲染的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
基于vue實(shí)現(xiàn)多功能樹(shù)形結(jié)構(gòu)組件的示例代碼
一個(gè)優(yōu)雅展示樹(shù)形結(jié)構(gòu)數(shù)據(jù)的 Vue 組件,遞歸渲染每個(gè)節(jié)點(diǎn)及其子節(jié)點(diǎn),支持自定義顏色、文本和布局,通過(guò)獨(dú)特的樣式巧妙處理不同層級(jí),為用戶(hù)打造豐富的視覺(jué)盛宴,文中通過(guò)代碼給大家介紹的非常詳細(xì),感興趣的同學(xué)可以自己動(dòng)手嘗試一下2024-02-02
深入理解Vue keep-alive及實(shí)踐總結(jié)
這篇文章主要介紹了深入理解Vue keep-alive及實(shí)踐總結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08