Vue2.3组件中的双向绑定

我理解.sync在Vue 2.3中返回的修饰符,并将其用于实现"多选"问题和答案的简单子组件.父组件像这样调用子组件:

父项具有一个字符串数据元素,userChoice用于存储子组件的结果.孩子为选项提供问题和单选按钮.孩子的基本部分看起来像这样(我使用的是Quasar q-radio):

export default {
  props: {
    stem: String,
    options: Array,
    answer: String
  },
  data: () => ({
    option: null
  }),
  methods: {
    handleInput () {
      this.$emit('update:answer', this.option)
    }
  }
}

这一切都很好,除了如果父母然后更改userChoice由于应用程序中发生的其他事情的值,孩子不会更新单选按钮.我不得不把这个包含watch在孩子身上:

  watch: {
    answer () {
      this.option = this.answer
    }
  }

但感觉有点多余,我担心发布事件以更新父母的数据实际上会导致孩子'观察'事件也被激活.在这种情况下除了浪费几个周期之外它没有任何效果,但如果它记录或计算任何东西,那将是一个误报...

也许这是真正的双向绑定的正确解决方案(即动态父→子,以及子→父).我是否错过了如何连接双方的'in'和'out'数据？

如果你想知道,想要改变'userChoice'的父母最常见的情况是响应一个'Clear Answers'按钮,它会设置userChoice回一个空字符串.这应该具有'取消'所有单选按钮的效果.