vue中如何修改props傳進(jìn)來的值
眾所周知，vue是單向數(shù)據(jù)流，一般我們也不會(huì)在子組件里面修改父組件傳進(jìn)來的值，但總有需要修改的時(shí)候。
前段時(shí)間一個(gè)項(xiàng)目中有遇到上述情況，假設(shè)我直接傳進(jìn)來一個(gè)list， 當(dāng)時(shí)我直接在里面改了list，但是卻驚訝的發(fā)現(xiàn)沒有報(bào)錯(cuò)，以前好像有遇到直接修改拋出錯(cuò)誤的，但這次卻沒有，當(dāng)時(shí)也沒有多想，最近空閑下來又想了下，發(fā)現(xiàn)自己確實(shí)**了(此處省略兩字_)。原因如下：
因?yàn)槲覀鬟M(jìn)來的list是個(gè)數(shù)組，屬于引用類型，修改子組件相當(dāng)于把父組件也同時(shí)修改了，所以沒有報(bào)錯(cuò)，如果是個(gè)基本類型的數(shù)據(jù)直接修改那么vue會(huì)報(bào)錯(cuò)。
在子組件修改props的方法：
1. 子組件data中拷貝一份，注意引用類型需要深拷貝，根據(jù)需求可以watch監(jiān)聽
data() {
return {
newList: this.list.slice()
}
},
watch: {
list(newVal) {
this.newList = newVal
}
}2. 通過計(jì)算屬性修改
computed: {
nList() {
return this.list.filter(item => {
return item.isChecked
})
}
}3. 通過研究大佬們的寫法又發(fā)現(xiàn)了一種修改方式： sync修飾符
父組件 傳進(jìn)去的時(shí)候加上 .sync
子組件 通過this.$emit(‘update:xxx’, params)
// 父組件
<todo-list :list.sync="list" />
// 子組件
methodName(index) {
this.$emit('update:list', this.newList)
}到此這篇關(guān)于vue中修改props傳進(jìn)來的值的文章就介紹到這了,更多相關(guān)vue修改Props值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Spring Boot/VUE中路由傳遞參數(shù)的實(shí)現(xiàn)代碼
在路由時(shí)傳遞參數(shù)，一般有兩種形式，一種是拼接在url地址中，另一種是查詢參數(shù)。這篇文章主要介紹了Spring Boot/VUE中路由傳遞參數(shù),需要的朋友可以參考下2018-03-03
Vue數(shù)據(jù)驅(qū)動(dòng)模擬實(shí)現(xiàn)5
這篇文章主要介紹了Vue數(shù)據(jù)驅(qū)動(dòng)模擬實(shí)現(xiàn)的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
Vue基于localStorage存儲(chǔ)信息代碼實(shí)例
這篇文章主要介紹了Vue基于localStorage存儲(chǔ)信息代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11
vue 獲取及修改store.js里的公共變量實(shí)例
今天小編就為大家分享一篇vue 獲取及修改store.js里的公共變量實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章我們將探討Vue3框架的優(yōu)秀特性、使用原理、周邊生態(tài)和實(shí)戰(zhàn)應(yīng)用，系統(tǒng)的學(xué)習(xí)Vue生態(tài)體系，希望和大家共同成長(zhǎng)，我們一起探討下Vue3和Vue2的響應(yīng)式原理，那究竟什么是“響應(yīng)式”，接下來跟著小編一起來學(xué)習(xí)吧2023-05-05
el-table-column 內(nèi)容不自動(dòng)換行的解決方法
本文主要介紹了el-table-column 內(nèi)容不自動(dòng)換行的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vue實(shí)現(xiàn)自定義el-table穿梭框功能
這篇文章主要介紹了vue實(shí)現(xiàn)自定義el-table穿梭框功能,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
這篇文章主要介紹了Vue中抽離接口配置文件的問題，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10
vue3.0公共組件自動(dòng)導(dǎo)入的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于vue3.0公共組件自動(dòng)導(dǎo)入的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)購(gòu)物車列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06