スキップしてメイン コンテンツに移動

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

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

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

EventBusとは?

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

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

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

実装イメージ

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

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

[EventBusのイメージ]
サンプルコードの実行イメージ

サンプルコード

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

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

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

<template>
  <div>
    <h2>コンポーネント1</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>

[コンポーネント1の表示イメージ]
コンポーネント1の実行イメージ

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

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

<template>
  <div>
    <h2>コンポーネント2</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>

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

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

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

<template>
  <div>
    <h2>コンポーネント3</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の表示イメージ]
コンポーネント3の表示イメージ

  1. コンポーネント1〜3を配置するページ ( 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>

実行結果

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

enter image description here

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

enter image description here

まとめ

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

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

スポンサーリンク
スポンサーリンク
スポンサーリンク

コメント

このブログの人気の投稿

axiosの使い方まとめ (GET/POST/例外処理)

axiosの使い方まとめ (GET/POST/例外処理)最近何かとよく使うJavaScriptでAJAX通信を行うaxiosについて、簡単に使い方をまとめました。GETリクエストをaxiosで送るまずはGETリクエストをaxiosで送る方法です。const res =await axios.get('/users') console.log(res.data)分割代入の記法を使うと、以下のようにも書けますconst{data}=await axios.get('/users') console.log(data)クエリパラメータ (URLパラメータ)を指定クエリパラメータを指定する方法は2つあります。1つ目は、axios.getに指定するURLに直接記述する方法です。axios.get('/user?id=123')2つめは、axios.getの第2引数に、オプション指定する方法です。axios.get('/user',{ params:{ id:123}})POSTリクエストをaxiosで送る次はPOSTリクエストをaxiosで送る方法です。JSON形式でPOSTするJSON形式でPOSTする場合は、axios.postの第2引数に、送信するデータをJavaScriptオブジェクトで指定します。const res =await axios.post('/user',{ id:123, name:'Yamada Tarou'})application/x-www-form-urlencoded形式でPOSTするapplication/x-www-form-urlencoded形式でPOSTする場合は、URLSearchParamsを使います。var params =newURLSearchParams() params.append('id',123) params.append('name','Yamada Tarou')const res =await axios.post('/user', params)axios でファイルをアップロードする画像などのファイルを、axiosでアッ…

[VB, C#] Windows 8, Window 10 で ImeModeが制御できない問題を解決する

[VB, C#] Windows 8, Window 10 で ImeModeが制御できない問題を解決するタイトルの通りですが、Windows 8 以降では Windows Form アプリケーションで、コントロールの ImeMode に Katakana や KatakanaHalf を設定しても、カタカナになってくれません。なぜ ImeMode が効かないのか?Windows 8 以降、IME Mode の切り替えは、ユーザー単位で切り替わるようになった為、アプリから IME Mode 制御が出来ないようになりました。
(IME をON にした場合、常に ひらがな モードになます)※ Windows 7までは、IME Modeの切り替えはアプリ単位で行われていた為、問題なくアプリから IME制御が行えました。対処方法Windows 8 以降、IMEの制御は、InputScope クラスの利用が推奨されています。
しかし、InputScope クラスは、WPF、Windows ストアアプリでしか使えない為、Windows Formアプリでは使用できません。
(Windows Form はもう使うな!という事でしょうか (涙) )結論としては、コントールパネルの設定で、IMEの制御をユーザ単位から アプリ単位に変更する事ができます。
これで、Windows Formアプリでも 従来通りIMEの制御を行う事が出来ます。おわりにこの方法だと、アプリをインストールする端末すべてに設定が必要となり、とっても面倒です。。。
しかし、今の所これしか方法がない状態です。
これからは Windows Formではなく、WPFや Windows ストアアプリで作れという事ですかね (^^;)

MailKitの使い方! エンコーディング指定や添付ファイをメールで送信する方法[C#/VB Tips]

MailKitの使い方! エンコーディング指定や添付ファイをメールで送信する方法[C#/VB Tips]MailKitを使ってメールを送るサンプルコードです。(C#)UTF8/iso-2022-jpのエンコーディング指定、GMail/YahooのSMTPサーバで送るなど、4つのサンプルコードでMailKitの使い方を紹介します。MailKitって何?2017年に.NET標準のSystem.Net.Mail.SmtpClientが廃止予定となり、Microsoftより今後はオープンソースライブラリである、MailKitに置き換えるとアナウンスがありました。既にSmtpClientは非推奨になっており、今後は廃止されていきます。現在、SmtpClientを使用したソースコードには、Visual StudioからMailKitを使うよう警告が出るようになっています。さっそく、MailKitを使ってメールを送信するサンプルコードを作っていきます。UTF8でメールを送信文字エンコーディングを、UTF8でメールを送信するサンプルコードです。
MailKitは、デフォルトの文字エンコーディングがUTF8なっている為、シンプルなコードでメールを送信する事ができます。var host ="<smtp server name>"; var port =25;// or 587using(var smtp =new MailKit.Net.Smtp.SmtpClient()){//SMTPサーバに接続する smtp.Connect(host, port, MailKit.Security.SecureSocketOptions.Auto);//認証が必要な場合は、以下のコメントを解除//smtp.Authenticate("<id>", "<password>");//送信するメールを作成する var mail =new MimeKit.MimeMessage(); var builder =new MimeKit.BodyBuilder(); mail.From.Add(new MimeKit.MailboxAddress("",&quo…