在写页面逻辑的时候出现这样一个情况
子组件获取父组件的 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 值实时更新了