javascript - VueJS V-bind :sync ="{object}" -- watching data emitted from child in parent

Question

我正在编写一个应用程序，其中有一个父组件，它通过 v-bind:sync="form" 将对象 this.form 传递给子表单组件code>，子表单在 @input 上为父表单的每个键发出值。

我想查看父级中 this.form 的值，但在 v-bind:sync 的情况下，父级上的对象似乎没有反应性，即使在提交时也是如此在父级中的操作中，我提交 this.form 以及子级发出的所有值。

代码示例家长:

<ParentComponent>

  <ChildComponent v-bind:sync="form"/>

  {{form}} <--- this doesn't update after child component emits

   <button @click="submit"> submit actions here have access to updated this.form... </button>
</ParentComponent>

...

data() {
  return {
      form: { ...some object keys}
}

Answer 1

您可以在观察者中使用deep来观察对象属性的变化。

类似的东西

  watch: {
    form: {
      handler() {
        console.log('form change')
      },
      deep: true
    }
  },

如 document 所示

To also detect nested value changes inside Objects, you need to passin deep: true in the options argument. Note that you don’t need to doso to listen for Array mutations.

我创建了一个demo here