[Nuxt.js] EventBusを使ってコンポーネント間で通信する

この記事では、Nuxt.jsでコンポーネント間のイベントのやり取りをする方法を紹介します。

Vue.jsを使い始めると、必ずぶち当たる問題の１つとして、「コンポーネント間でのデータ・イベントのやり取り」が挙げられます。
いくつかの対応策がある中の１つの解として、EventBusの概念を使ってコンポーネント間で通信する方法があります。

スポンサーリンク

EventBusとは？

参考リンク（Vue.js v2で親子間以外のイベントやり取り）

上のリンクでも紹介されていますが、EventBusの仕組は、１つのグローバールなVueオブジェクト対し、各コンポーネントが$on, $emitを行う事によって、イベントのやり取りを行なって行きます。

Nuxt.jsには、$nuxtというグローバルなVueオブジェクトが既に存在しています。
その為、素のVue.jsより簡単にEventBusによるイベントのやり取りが行えるようなっています。
以降は、そのやり方について紹介します。

実装イメージ

今回作成する、サンプルコードの実行イメージです。

(1)コンポーネント1が、$nuxt.emit()で、グローバルなVueオブジェクトに対し、イベントを発火する。
(2)コンポーネント2と3は、$nuxt.on()でイベントハンドラを登録し、イベント発生時に、コンポーネント1から渡されたパラメータを画面上に表示する。

[EventBusのイメージ]

サンプルコード

全部で４つのファイルを作ります。

1. コンポーネント１ ( components/Component1.vue )

ボタンが押されたら、$nuxt.$emit()でイベントを発火します。
その際、イベントパラメータとして、テキストボックスに入力値を渡します。

<template>
  <div>
    <h2>コンポーネント１</h2>
    <div>
      <input type="text" v-model="value"/>
      <button @click="sample_event">イベント発火</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: ""
    }
  },
  methods: {
    sample_event() {
      this.$nuxt.$emit('SAMPLE_EVENT', this.value);
    }
  }
}
</script>

[コンポーネント１の表示イメージ]

2. コンポーネント２ ( components/Component2.vue )

created()の初期化時に、$nuxt.$on()でイベントハンドラの登録を行います。
コンポーネント１からイベントが発火されると、イベントパラメータで渡ってきた値を画面上に表示します。

<template>
  <div>
    <h2>コンポーネント２</h2>
    <div>
      <span v-text="data"></span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null
    }
  },
  created() {
    this.$nuxt.$on('SAMPLE_EVENT', data => {
      this.data = data;
    });
  },
  beforeDestroy() {
    this.$nuxt.$off('SAMPLE_EVENT');
  }
}
</script>

[コンポーネント２の表示イメージ]

3. コンポーネント３ ( components/Component3.vue )

やってる事は、コンポーネント２とまったく同じです。

<template>
  <div>
    <h2>コンポーネント３</h2>
    <div>
      <span v-text="data"></span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null
    }
  },
  created() {
    this.$nuxt.$on('SAMPLE_EVENT', data => {
      this.data = data;
    });
  },
  beforeDestroy() {
    this.$nuxt.$off('SAMPLE_EVENT');
  }
}
</script>

[コンポーネント３の表示イメージ]

4. コンポーネント１〜３を配置するページ ( pages/Sample.vue )

<template>
  <div>
    <component1/>
    <component2/>
    <component3/>
  </div>
</template>
<script>

import Component1 from '~/components/Component1.vue'
import Component2 from '~/components/Component2.vue'
import Component3 from '~/components/Component3.vue'

export default {
  components: {
    Component1,
    Component2,
    Component3
  }
} 
</script>

スポンサーリンク

実行結果

コンポーネント１のテキストボックスに、適当な値を入力して、「イベント発火」ボタンをクリックすると…

コンポーネント２、３に入力した値が表示されます。

まとめ

サンプルコードを見て頂ければ分かると思いますが、Nuxt.jsでは簡単に EventBusが行えるようになっています。
また今回は、親子関係がないコンポーネント間で、イベントのやり取りを行いましたが、親子関係があるコンポーネント間でも、この方法は使えます。

EventBusとは別に、Vue.jsで状態管理を行うフレームワークとして、Vuexという物もあります。
こちらもNuxt.jsで使う事が出来る為、別の機会に記事にしたいと思います。