如何保持两个相同的 Vue 组件彼此同步？

Question

我正在尝试使同一页面上的两个单选按钮集群（但在不同的抽屉内）保持同步。在我将它们分解成一个组件之前，这已经奏效了。

现在我的组件看起来像：

Vue.component('radio-cluster', {
props: ['value'],
template: `
    ...
    <input type="radio" name="radio" value="Hour" :checked="value == 'Hour'" @input="$emit('input', $event.target.value)">
    <input type="radio" name="radio" value="Week" :checked="value == 'Week'" @input="$emit('input', $event.target.value)">
    ...
    `,
});

Vue 实例：

new Vue({
el: '#app',
data: function () {
    return {
        timePeriod: "Hour"
    }
});

以及相关的HTML：

<div id="app">
    <radio-cluster v-model="timePeriod"></radio-cluster>
    ...
    <radio-cluster v-model="timePeriod"></radio-cluster>
</div>

我得到的行为很奇怪。它将正确显示在两个集群之一中，并从任一集群发出正确的事件。但是另一个组件忽略了我点击的那个事件。 如何让 Vue 获取一个组件中更新的值，并在其中一个组件更新时自动将其提供给另一个组件？

Answer 1

似乎每个input 的问题原因都是相同的name。

来自documentation
通过为组中的每个单选按钮赋予相同的名称来定义单选组。建立单选组后，选择该组中的任何单选按钮会自动取消选择同一组中的任何当前选择的单选按钮。

尝试删除name属性：

<input type="radio" value="Hour" :checked="value == 'Hour'" @input="$emit('input', $event.target.value)">
<input type="radio" value="Week" :checked="value == 'Week'" @input="$emit('input', $event.target.value)">

如果需要name 属性，则为每个组件使用不同的名称。
感谢@Ferrybig 的评论。