Vuejsで非親子関係のコンポーネントを同期する

Vuejsでコンポーネントを同期する

やったこと

非親子関係のコンポーネントを同期させる。

実際にできたもの

ボタンを押した数だけどちらのコンポーネントも加算される

構成

commponents
 ┣ Button.vue 
 ┣ Component1
 ┣ Component2
 ┗ HelloWorld.vue

Component1とComponent2のコンポーネントを同期させる

Button.vue

<template>
  <div>
    <v-btn color="primary" @click="click()">ボタン</v-btn>
    {{dataset.count}}{{message}}
  </div>
</template>
<script>
export default {
  props: { dataset: { type: Object, default: null } },
  data() {
    return {
      message: ""
    };
  },
  methods: {
    click() {
      this.message = "押されたよ";
      this.dataset.count += 1;
    }
  }
};
</script>>

dataset.countにボタンを押された回数が入っている。
propsで同じ変数を見るようにする。

Component1.vue,Component2.vue

Component1.vueとComponent2.vueは中身は同じ。
バインディングするプロパティ(:dataset="datasetHoge")をComponent1.vue/Component2.vueで同じにする。
同じプロパティをバインドすることで、非親子間での動機が可能になる

<template>
  <div>
    <Button :dataset="datasetHoge" />
  </div>
</template>
<script>
import Button from "./Button";
export default {
  props: {
    dataset: {
      type: Object,
      default: null
    }
  },
  components: {
    Button
  },
  data() {
    return { datasetHoge: this.dataset };
  }
};
</script>>

HelloWorld.vue

<template>
  <div>
    <v-col cols="3">
      <Component1 :dataset="dataset" />
    </v-col>
    <v-col cols="3">
      <Component2 :dataset="dataset" />
    </v-col>
  </div>
</template>

<script>
import Component1 from "./Component1";
import Component2 from "./Component2";

export default {
  components: {
    Component1,
    Component2    
  },
  data() {
    return { dataset: { count: 0 } };
  }
};
</script>

Component1とComponent2をImportする