[Vue] props傳參-多層引用數據類型的處理

DiracKeeko 2022-01-07 23:25:48 阅读数:365

vue props 引用

場景:
vue2中,子組件中不能修改父組件傳入的props,否則會報錯。
但是實際使用中,發現上面的描述,限於props為基本數據類型的情况 (如boolean,number,string)。
如果傳入的props是兩層及兩層以上的引用數據(如數組內套對象 [object1, object2, ... ],這種情况下),修改props,不會報錯。

舉例如下:

父組件
<Child :basic-data="params"></Child>
data() {
return {

params: [
{ name: "Mike", age: "17" },
{ name: "Rose", age: "18" }
]

}
}

子組件
<div v-for="item in basicData" :key="item.name">
<span>{{item.name}} 年齡:</span>
<input type="text" v-model="item.age">

</div>
props: {

basicData: { type: Array, default: []}

}

這種情况下,子組件中修改年齡是沒問題的,不會報錯,且父元素中的params也會被修改掉。

為了避免這種情况,應該避免直接使用v-for="item in basicData",而應該用一個由basicData深拷貝出來的對象放在dom中渲染。
這個深拷貝可以在data中,也可以在computed中,要看需求是怎樣的。

深拷貝的具體實現要分場景,最簡單的的JSON.parse()+JSON.stringify(),Object.assign(),甚至引用第三方庫(如lodash)的cloneDeep都可以。

這裏給出一個用computed的實現

duplicateBasicData: {
get() {

return cloneDeep(this.basicData);

},
set(val) {

this.$emit("change", val);

}
}

在set的時候通過$emit將數據變更顯式的傳遞到父組件。
父組件監聽"change"事件,將事件傳遞來的duplicateBasicData新值賦值給params。

版权声明:本文为[DiracKeeko]所创,转载请带上原文链接,感谢。 https://gsmany.com/2022/01/202201072325475804.html