Vue.js Vue 2.3组件中的双向绑定

我理解Vue 2.3中返回的

.sync

修饰符，并将其用于实现“多项选择”问题和答案的简单子组件。父组件调用子组件的方式如下：

<question
  :stem="What is your favourite colour?"
  :options="['Blue', 'No, wait, aaaaargh!']
  :answer.sync="userChoice"
>

这一切都很好，除了这样一个事实，即如果家长因为应用程序中发生的其他事情而更改了

userChoice

的值，那么孩子不会更新单选按钮。我必须把这只

手表

放在孩子身上：

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

但这感觉有点多余，我担心发出事件来更新家长的数据实际上会导致孩子的“监视”事件也触发。在这种情况下，它除了浪费几个周期之外没有任何效果，但如果它记录或计数任何东西，那将是一个误报

对于真正的双向绑定（即动态父绑定），这可能是正确的解决方案→ 孩子，还有孩子→ 家长）。我是否错过了关于如何连接两侧的“输入”和“输出”数据的内容

---

如果您想知道，家长想要更改“userChoice”最常见的情况是响应“Clear Answers”（清除答案）按钮，该按钮会将

userChoice

设置回空字符串。这应该具有“取消设置”所有单选按钮的效果。

您的构造有一些不起作用的奇怪之处，但基本上是

答案。如果您将其传播到发生更改的
q-radio
组件，sync

会起作用。在父级中更改答案是正确处理的，但要清除值，似乎需要将其设置为对象而不是null（我认为这是因为它需要可赋值）

更新 您的

选项设置

是一个值得注意的失败

我在

q-radio

中使用

answer

来控制其选中状态（

v-model

在收音机中有特殊行为，这就是为什么我将

value

与

v-model

结合使用的原因）。从您的评论来看，似乎

q-radio

希望有一个可以设置的值。您应该能够使用基于

答案的计算，而不是使用
选项
数据项来执行此操作：
get
返回
答案
，而
集合
是否发出
。我已经更新了我的代码片段，使用
val
prop作为
q-radio
加上我描述的计算结果。
proxyAnswer
发出一个
update
事件，这是
.sync
修饰符想要的。我还使用代理计算实现了
q-radio
，但这只是为了得到应该已经烘焙到
q-radio
中的行为

（我所描述的实际上是您使用数据项和观察者所做的事情，但使用计算的方法封装数据项和观察者是一种更好的方法）


newvue({
el:“#应用程序”，
数据：{
userChoice:null，
选项：['Blue'，'No，wait，aaaaa rgh！'。map（v=>({
值：v，
正文：v
}))
},
组成部分：{
问题:{
道具：{
茎：弦，
选项：阵列，
回答：字符串
},
计算：{
代理答复：{
得到（）{
回答这个问题；
},
设置（新值）{
此.$emit（'update:answer'，newValue'）；
}
}
},
组成部分：{
qRadio：{
道具：['value'，'val']，
计算：{
proxyValue：{
得到（）{
返回此.value；
},
设置（新值）{
此.$emit（'input'，newValue）；
}
}
}
}
}
}
},
方法：{
选举{
this.userChoice={}；
}
}
});

{{stem}}
答案={{Answer&&Answer.text}，选项={{opt.text}
{{opt.text}
清楚的
我对这些奇怪之处很好奇——我知道我没有发布整个组件，但它对我来说运行良好。也许是因为类星体，包括网页和巴别塔？我的所有代码都在单个文件组件（.vue）中。但是，最重要的是，
q-radio
是一个类星体组件（），所以我不确定我能否实现您上面所做的-它只接受
v-model
和
val
道具，但您也在那里指定了
answer
。当然，我不能将我收到的
答案
绑定到
q-radio
v-model
，这会导致“突变道具”错误。但是，根据你所说的，我认为这会减少到我的另一个问题，这也没有一个非常清晰的答案：实际上我需要做的是将
答案
绑定传递到
q-radio的
v-model
。但目前，Vue并没有提供一种无缝的方式来实现这一点，我不这么认为。
  watch: {
    answer () {
      this.option = this.answer
    }
  }