产生错误的原因:在子组件中,你试图修改父组件通过props与子组件通信的数据。
1.方法一
1.将这个父组件传进来的要修改的数据,通过$emit再传回给父组件,在父组件中进行修改。 2. 当父组件通过props与子组件通信时,可以将数据放在一个对象中传递给子组件,这时再子组件就可以修改对象中的属性,也就修改了父组件传过来的数据。
子组件
addForm() {
this.$emit("chooseItem", this.newGoodsList);
},
父组件
<deliveryList
:goodsList="doorSceneGoodsList2"
@addGoodListsWholesale="addGoodListsWholesale"
@DeleteGoodListsWholesale="DeleteGoodListsWholesale"
:type="2"
:show="2"
@chooseItem="chooseItem"
/>
chooseItem(list) {
this.doorSceneGoodsList2 = this.doorSceneGoodsList2.filter((v) => {
return v.goodsId !== "";
});
this.doorSceneGoodsList2 = list;
},
2.方法二
不直接使用该参数
export default {
props: {
topData: Array,
topActive: {
type: String,
required: true,
},
},
data() {
return {
// 避免直接修改props
activeTopTemp: this.topActive,
}
},
}