Vue.jsで兄弟要素を同期させる複製を作りたい

Vue.js V2を使っています。

子要素の子コンポーネントをクリックすると、
複数ある子要素のすべての色が変わるし、親要素の色も変わる、
そんなものを作りたいのです。
子要素から親要素へは、this.$emitで伝達できると思うのですが、兄弟への伝達方法がわかりません。
親から子の要素を動的に変更するにはどのようにすればいいでしょうか。

下記はイメージのVue.jsファイルです。
親コンポーネント?

parrent.vue
1<tepmplate>
2  <div>
3    <brother @clickChildren="changeColor($event)" :color="000000"></brother>
4    <brother @clickChildren="changeColor($event)" :color="000000"></brother>
5  </div>
6<template>
7
8<script>
9  new Vue({
10    data(){
11      return {
12        color: "000000",
13      } 
14    }
15    methods: {
16      changeColor(color){
17        this.color = color
18        // 他の兄弟の色も変更する処理を加えたい
19      }
20    }
21  })
22<script>

子のVueコンポーネント

children.vue
1<tepmplate>
2  <div @click="emitEvent"></div>
3<template>
4
5<script>
6  new Vue({
7    data() {
8      return {
9        color: "000000"
10      }
11    }
12    methods: {
13      emitEvent: function(){
14        this.$emit("clickChildren", this.color)
15      }
16    }
17  })
18<script>

全くシンクロさせるような形で、兄弟の要素も、親の要素もすべて同じ色になるような形がいいです。

行動規範の内容に同意します

回答1件

ベストアンサー

propsと$emitを利用して表現できると思います。

以下例の全量になります。

data colorとcolor変更の処理を記述しています。
親

vue
1<template>
2  <div id="app">
3    <div class="hoge" :style="{ background: color}">親</div> 
4    <FirstComponent @onClick="changeColor" :color="color"/>
5    <FirstComponent @onClick="changeColor" :color="color"/>
6  </div>
7</template>
8
9<script>
10import FirstComponent from './components/FirstComponent.vue'
11
12export default {
13  name: 'App',
14  components: {
15    FirstComponent
16  },
17  data: function() {
18    return {
19      color: ''
20    }
21  },
22  methods: {
23    changeColor: function(color) {
24      this.color = color;
25    }
26  }
27}
28</script>
29
30<style scoped>
31  .hoge {
32    width: 200px;
33  }
34</style>

親から渡されたcolorの変更処理を記載
表示に利用するcolorは親から取得する

子

vue
1<template>
2  <div>
3    <div class="hoge" :style="{background: color}">子1</div>
4    <input type="text" v-model="inputColor">
5    <button type="button" @click="changeColor">入力</button>
6  </div>
7</template>
8
9<script>
10export default {
11  name: 'FirstComponet',
12  props: ['color'],
13  data: function() {
14    return {
15      inputColor: ''
16    }
17  },
18  methods: {
19    changeColor: function() {
20      this.$emit('onClick', this.inputColor);
21    }
22  }
23}
24</script> 
25
26<style scoped>
27  .hoge {
28    width: 200px;
29  }
30</style>