vue使用prop通信出错:Avoid mutating a prop directly since the value will be overwritten

180 阅读1分钟

产生错误的原因:在子组件中,你试图修改父组件通过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,
    }
  },
}