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

父组件：

<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中获取数据。
       总算可以开心的取出道具了。