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

