vue.js - Vue.js 中如何监听通过 .sync 修饰符传递的对象变化？

Question

vue2 父组件定义了一个对象，通过.sync方法传递给子组件，子组件会改变这个对象的值，然后想watch这个值发现产生变化的时候调用某个回调，发现watch不到。。为什么会watch不到呢？应该通过defineOxxx函数进行了监听？有什么解决方法吗

在子组件也尝试监听，没监听到

Answer 1

因为不知道你在子组件内部是否是正确的通过 $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：

<template>  <div id="app">    <test-component :show.sync="show"/>  </div></template><script>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    }  }}</script>

<template>  <div>    <button @click="handleClick">点击变更Show值</button>    <div>{{ show }}</div>  </div></template><script>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})    }  }}</script>

Answer 2

在 Vue 2 中，.sync 修饰符是用于双向绑定父子组件数据的。当子组件通过 .sync 修饰符修改传递的对象时，父组件会自动更新这个对象。但是，如果你想在子组件中监听这个对象的变化并执行某个回调，直接使用 watch 是不行的，因为 .sync 修饰符会拦截这个对象的变化并自动同步给父组件，所以子组件的 watch 无法捕获到这个变化。

要解决这个问题，你可以使用 Vue 的自定义事件系统。在子组件中，你可以在修改对象后触发一个自定义事件，并将变化后的对象作为事件的参数传递给父组件。父组件可以监听这个事件，并在事件触发时执行相应的回调。

下面是一个简单的示例：

子组件 (ChildComponent.vue)：

<template>  <div>    <button @click="updateObject">更新对象</button>    <p>{{ objectData }}</p>  </div></template><script>export default {  data() {    return {      objectData: null,    };  },  methods: {    updateObject() {      this.objectData = { a: 1, b: 2 }; // 修改对象      this.$emit('object-updated', this.objectData); // 触发自定义事件，并将变化后的对象作为参数传递给父组件    },  },};</script>

父组件 (ParentComponent.vue)：

<template>  <div>    <ChildComponent :object-data.sync="objectData" @object-updated="handleObjectUpdated"></ChildComponent>  </div></template><script>import ChildComponent from './ChildComponent.vue';export default {  components: { ChildComponent },  data() {    return {      objectData: null, // 通过 .sync 修饰符与子组件的数据进行双向绑定    };  },  methods: {    handleObjectUpdated(updatedObject) {      // 在这里可以执行你想要的操作，比如调用某个回调函数      console.log('Object updated:', updatedObject);    },  },};</script>

在上面的示例中，子组件通过点击按钮修改了 objectData 对象，然后触发了一个名为 object-updated 的自定义事件，并将变化后的对象作为参数传递给父组件。父组件通过监听 object-updated 事件来捕获这个变化，并在事件触发时执行 handleObjectUpdated 方法。这样你就可以在子组件中监听到通过 .sync 修饰符传递的对象变化了。