在写页面逻辑的时候出现这样一个情况
子组件获取父组件的props值,并直接修改
控制台报错
这是因为vue为了避免子组件修改数据污染父组件而采取的措施
于是我把props值赋值给子组件的一个state
props: {
checkednames: {
type: Array,
default: []
}
},
data() {
return {
mycheckedNames: this.checkednames
};
},
发现state值自从获取了第一次的props值之后再也没有改变过
即子组件收到了父组件传过来的props值,但并没有更新到state
原因在于:没有使用深度监听监听对象
解决方案:
如果要修改props传入的值,用watch可以多次修改,watch监听对象得用深度监听
watch:{
checkednames(val){
this.mycheckedNames = val
}
}
我们发现state可以根据父组件传过来的props值实时更新了
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。