Vue.js 中如何监听通过 .sync 修饰符传递的对象变化？-灵析社区
CTangvue2 父组件定义了一个对象，通过.sync方法传递给子组件，子组件会改变这个对象的值，然后想watch这个值发现产生变化的时候调用某个回调，发现watch不到。。为什么会watch不到呢？应该通过defineOxxx函数进行了监听？有什么解决方法吗 在子组件也尝试监听，没监听到
一一在debug因为不知道你在子组件内部是否是正确的通过 "$emit('update:show', { ... })" 提交的修改。如果是正确提交的 "emit"
触发的修改应该是可以正确出发 "watch" 的。
所以只能建议你在父级添加一下 "deep" 应该就可以触发监听了：
// 父级组件
export default {
data(){
return {
easyShow: {
...
}
}
},
watch: {
easyShow: {
handler(val) {
console.log(val, this.easyShow);
},
deep: true
}
}
}
以下是一个简单的通过 "bind.sync" 更新父组件绑定值的一个小Demo：
import TestComponent from './components/TestComponent.vue'
export default {
name: 'App',
components: { TestComponent },
data() {
return {
show: {
a: true,
b: false,
c: true
}
}
},
watch: {
show: {
handler(val) {
console.log('app.vue show changed', val, this.show);
},
// deep: true
}
}
}
点击变更Show值
{{ show }}
export default {
name: 'TestComponent',
props: {
show: Object
},
watch: {
show(){
console.log('components.vue show changed', this.show);
}
},
methods:{
handleClick(){
this.$emit('update:show', { a: !this.show.a, b: !this.show.b, c: !this.show.c})
}
}
}