Vue.jsのコンポーネント通信について

Vue.jsのコンポーネント通信には、親子コンポーネント間の通信（親から子へのデータの受け渡し）、子親コンポーネント間の通信（子から親へのイベントの発火）、非親子コンポーネント間の通信（イベントバスやVuexなどを使用した中央集権的な状態管理）など、いくつかの方法があります。

そもそもVue.jsとは？という方は以下のリンクからご覧ください

親子コンポーネント間の通信:

親から子へのデータの受け渡し: 親コンポーネントから子コンポーネントへデータを渡すためには、propsを使用します。親コンポーネントで子コンポーネントにデータを渡し、子コンポーネント内でそのデータを使用することができます。

<!-- 親コンポーネント -->
<template>
  <child-component :message="parentMessage"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  }
}
</script>

<!-- 子コンポーネント -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: ['message']
}
</script>

子親コンポーネント間の通信:

子から親へのイベントの発火: 子コンポーネントから親コンポーネントにイベントを発火するには、$emitメソッドを使用します。子コンポーネントでイベントを発火し、親コンポーネントでそのイベントを受け取ります。

<!-- 子コンポーネント -->
<template>
  <button @click="sendMessage">Send Message to Parent</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello from child');
    }
  }
}
</script>

<!-- 親コンポーネント -->
<template>
  <div>
    <child-component @message="handleMessage"></child-component>
    <p>{{ receivedMessage }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedMessage: ''
    }
  },
  methods: {
    handleMessage(message) {
      this.receivedMessage = message;
    }
  }
}
</script>

非親子コンポーネント間の通信:

イベントバスやVuexなどを使用した中央集権的な状態管理: イベントバスを使用する場合、イベントバスを介して異なるコンポーネント間でイベントを発火したり、状態を共有したりすることができます。Vuexを使用する場合は、アプリケーション全体で中央集権的な状態管理を行うことができます。