最近在做前端工程的代码优化工作,之前把所有代码都写在一起了,感觉太臃肿了,找个东西都要搜个半天,所以计划把页面上的一些内容提取出组件,然后整合起来。
       首先,就先来做道具柜的显示子组件吧。
       这个子组件的功能是显示当前柜子中的所有道具,然后对道具有个取出的操作,取出后重新查询一遍当前柜子的内容,然后返回最新内容。

父组件:

<cabinet 
	v-bind:curCabinet="curCabinet" 
	v-bind:cabinetItems="cabinetItems" 
	v-bind:changging="changging" 
	v-bind:cabinetName="cabinetName"></cabinet>

子组件:

export default {
  name: 'cabinet',
  props:{
    curCabinet: Object,
    cabinetItems: Array,
    changging: {
      type: Boolean,
      default: false
    },
    cabinetName:{
        type: String
    }
  }
}

        cabinetItems是从父组件传过来的,子组件直接对该列表进行显示,取出操作时后台回报一个警告:[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "cabinetItems",大意是说不能在子组件中直接对父组件传递过来的参数进行修改,因为每当父组件重新呈现时,该值都将被覆盖。然后让你使用data或者computed进行转换。

        我测试了一下:

data() {
    return {
        myCabinetItems: this.cabinetItems
    };
}

       子组件从myCabinetItems中获取数据。
       这种写法在取出操作时后台不会报错了,但是我发现再从父组件进子组件时,内容也不会变了。再回过头看下翻译的前一句,意思是说当父组件重新呈现时,该值都将不被覆盖?这可不能满足我的需求。

       最终在白杨同学的帮助下,使用watch解决了我的问题。

export default {
  name: 'cabinet',
  props:{
    cabinetItems: Array
  },
  data() {
    return {
      myCabinetItems: []
    };
  },
  watch: {
    cabinetItems: {
        handler(newVal, oldVal) {
			this.myCabinetItems = newVal;
        }
    }
  }
}

       同样的,子组件还是从myCabinetItems中获取数据。
       总算可以开心的取出道具了。

最后修改于 2019-05-22 16:52:46
如果觉得我的文章对你有用,请随意赞赏
扫一扫支付
上一篇