Vue.js 为同级组件设置相同的值'；s选择

使用v-for，我在一个组件中循环。该组件适用于每个客户端。在这个组件中，我为每个客户机使用相同的表单，当为第一个组件（客户机1）选择一个选择值时，我希望为每个客户机选择这个值

我是否需要将数据传递到根并创建一个真值变量源

我尝试设置基本版本：

<div id="app">
  <my-comp v-for="x in 2" v-bind:val="x"></my-comp>
</div>


Vue.component('my-comp', {
   props: ['val'],

   template: `
    <div>
        <div>
          <label>Status</label>
          <select :data-client="val" @change="statusChanged">
              <option selected="" disabled="" value="0"></option>
              <option value="xxx">Xxx</option>
              <option value="yyy">Yyy</option>
              <option value="zzz">Zzz</option>
           </select>
        </div>
    </div>
    `,

   methods: {
     statusChanged(e) {
          var client = e.target.getAttribute('data-client')
          if (client == 1) {
            alert('set same value for client 2')
          }
     }
   }
})

new Vue({
  el: '#app',
})

Vue.组件（“我的公司”{
道具：['val']，
模板：`
地位
Xxx
Yyy
Zzz
`,
方法：{
状态更改（e）{
var client=e.target.getAttribute（'data-client'））
如果（客户端==1）{
警报（'为客户端2设置相同的值'）
}
}
}
})
新Vue({
el:“#应用程序”，
})

---

这里有一把小提琴：

我在我最初的答案之后考虑了一下，并提出了一些我认为比原始问题中提供的小提琴示例更真实的东西；具体地说，如果所有选择都使用相同的源值，那么很容易使它们反映相同的值，但是我希望在实际场景中，每个组件都将独立地绑定到单个客户端。每个客户机都希望其各自的价值发生变化，但有一点需要注意，即如果“主”客户机发生变化，那么所有非主客户机都应改变为主客户机的价值

为此，在这种情况下，我认为特定于组件的总线是合适的。当主服务器的值更改时，主服务器将发出一个事件，其他客户端将设置它们相对于主服务器的值

console.clear（）
const mycopbus=新Vue（）
Vue.组件（“我的公司”{
道具：['val'，'master'，]，
计算：{
选定：{
get（）{返回this.val}，
集合（v）{
此.$emit（'更新：val'，v）
if（本.master）
MyCompBus.$emit（“主更新”，v）
}
}
},
方法：{
onMasterUpdated（newMasterValue）{
如果（这个主人）回来了
this.selected=newMasterValue
}
},
创建（）{
MyCompBus.$on（'master-updated'，this.onMasterUpdated）
},
在…之前{
MyCompBus.$off（'master-updated'，this.onMasterUpdated）
},
模板：`
地位
Xxx
Yyy
Zzz
`,
})
新Vue({
el:“#应用程序”，
数据：{
masterValue:null，
客户：[
{id:1，selectedValue:null，master:true}，
{id:2，selectedValue:null}，
{id:3，selectedValue:null}，
{id:4，selectedValue:null}，
]
}
})

{{clients}}

我在最初的答案之后考虑了一下，得出了一些我认为比原始问题中提供的小提琴示例更真实的东西；具体地说，如果所有选择都使用相同的源值，那么很容易使它们反映相同的值，但是我希望在实际场景中，每个组件都将独立地绑定到单个客户端。每个客户机都希望其各自的价值发生变化，但有一点需要注意，即如果“主”客户机发生变化，那么所有非主客户机都应改变为主客户机的价值

为此，在这种情况下，我认为特定于组件的总线是合适的。当主服务器的值更改时，主服务器将发出一个事件，其他客户端将设置它们相对于主服务器的值

console.clear（）
const mycopbus=新Vue（）
Vue.组件（“我的公司”{
道具：['val'，'master'，]，
计算：{
选定：{
get（）{返回this.val}，
集合（v）{
此.$emit（'更新：val'，v）
if（本.master）
MyCompBus.$emit（“主更新”，v）
}
}
},
方法：{
onMasterUpdated（newMasterValue）{
如果（这个主人）回来了
this.selected=newMasterValue
}
},
创建（）{
MyCompBus.$on（'master-updated'，this.onMasterUpdated）
},
在…之前{
MyCompBus.$off（'master-updated'，this.onMasterUpdated）
},
模板：`
地位
Xxx
Yyy
Zzz
`,
})
新Vue({
el:“#应用程序”，
数据：{
masterValue:null，
客户：[
{id:1，selectedValue:null，master:true}，
{id:2，selectedValue:null}，
{id:3，selectedValue:null}，
{id:4，selectedValue:null}，
]
}
})

{{clients}}

谢谢。但是我想要一些不同的东西。我只想让第一个改变别人，而当第二个改变时，什么也不会发生。所以，它们并不完全是链接在一起的，但是客户端1为客户端进行了更改2@senty然后使用Bert的第二个示例，但仅在第一个组件上使用

.sync

@senty我添加了另一个可能的解决方案。非常感谢您提供的各种答案！但是我有一个问题，如果我想在

：val.sync

中使用多个单词而不是

val

，例如

：hello world:sync

？@senty组件可以根据需要同步任意多个属性。但是如果你有大量的数据，你可能会考虑使用一个对象。谢谢。但是我想要一些不同的东西。我只想让第一个改变别人，而当第二个改变时，什么也不会发生。所以，它们并不完全是链接在一起的，但是客户端1为客户端进行了更改2@senty然后使用Bert的第二个示例，但仅在第一个组件上使用

.sync

@senty我添加了另一个可能的解决方案。非常感谢您提供的各种答案！但是我有一个问题，如果我想在

：val.sync

中使用多个单词而不是

val

，例如

：hello world:sync

？@senty组件可以根据需要同步任意多个属性。但是如果你有大量的数据，你可能想考虑使用一个对象。