[NuxtJS]コンポーネント間の通信にEventBusを使う

親子関係とかがないコンポーネント間でデータの受け渡しをやろうとした時に「EventBus」という通信の方法があるのを見つけたので実装方法を説明していきたいと思います。

前提条件
実装のポイント
実装サンプル
動作確認
最後に

前提条件

vue：2.6.14
nuxt：2.15.8

こちらから今回のソースコードを確認できます。

GitHub - koichi-ezato/nuxt-sample at EventBus

Contribute to koichi-ezato/nuxt-sample development by creating an account on GitHub.

実装のポイント

$emit,$on,$offを使用してEventBusを実装します。

受信側ではmountedのタイミングでイベントハンドラを追加し、beforeDestroyで後処理の実装(追加したイベントハンドラをoffにする)が必要になります。

実装サンプル

送信側と受信側のコンポーネントを作成し、pagesでそれぞれのコンポーネントを呼び出しています。

送信側(EventBusSend.vue)

<template>
  <v-btn tile @click='sendMessage'>送信</v-btn>
</template>

<script>
export default {
  name: 'EventBusSend',
  methods: {
    sendMessage() {
      this.$nuxt.$emit('SEND_MESSAGE', 'メッセージを送信しました。')
    },
  },
}
</script>

受信側(EventBusReceive.vue)

<template>
  <span>送信された値：{{ message }}</span>
</template>

<script>
export default {
  name: 'EventBusReceive',
  data() {
    return {
      message: '',
    }
  },
  mounted() {
    this.$nuxt.$on('SEND_MESSAGE', (result) => {
      this.message = result
    })
  },
  beforeDestroy() {
    this.$nuxt.$off('SEND_MESSAGE')
  },
}
</script>

pages(EventBus.vue)

<template>
  <v-card>
    <v-card-title>EventBusサンプル</v-card-title>
    <v-card-text>
      <event-bus-receive />
    </v-card-text>
    <v-card-actions>
      <event-bus-send />
    </v-card-actions>
  </v-card>
</template>

<script>
import EventBusReceive from '~/components/EventBusReceive'
import EventBusSend from '~/components/EventBusSend'

export default {
  name: 'EventBus',
  components: { EventBusSend, EventBusReceive }
}
</script>