画面要素を再利用できる、Vue.jsのコンポーネント機能を学ぼう

JavaScriptフレームワーク「Vue.js」と「Nuxt.js」の活用 第4回

コンポーネントのカスタムイベント

　コンポーネントでカスタムイベントを発生させる方法を、図4のサンプルで説明します。各コンポーネントの「この商品を買う」ボタンをクリックすると、対応したメッセージが表示されます。

図4：コンポーネントのカスタムイベントを利用するサンプル（p004-event）

　カスタムイベントを発生するコンポーネントをリスト9に示します。

［リスト9］カスタムイベントを発生するコンポーネント（p004-event/components/Smartphone.vue）

export default {
  props: ['spec'], // プロパティ ...（1）
  methods: {
    onClickButton() { // ボタンのイベントハンドラー ...（2）
      this.$emit('phoneSelected', this.spec) // カスタムイベント発生 ...（3）
    }
  }
}

　（1）はプロパティの定義です。（2）はコンポーネントのボタンがクリックされたときのイベントハンドラーで、（3）のthis.$emitメソッドでカスタムイベントを発生させます。第1引数の「phoneSelected」はカスタムイベントのイベント名で、第2引数にはイベント変数（ここではspecプロパティの内容）を設定できます。

　コンポーネントを利用する側では、カスタムイベント名を設定した「v-on:phoneSelected」ディレクティブで、イベント発生時に実行するメソッド（ここではonPhoneSelecedメソッド）を設定します。

［リスト10］コンポーネントのカスタムイベントを利用する実装（p004-event/pages/index.vue）

<Smartphone v-bind:spec="phone" v-on:phoneSelected="onPhoneSelected"/>

　onPhoneSelecedメソッドの実装はリスト11の通りです。引数eventには、リスト9（3）で設定したイベント変数（specプロパティの内容）が渡されます。ここではeventから会社名（event.vendor）と商品名（event.name）を取得してメッセージを表示します。

［リスト11］カスタムイベントのイベントハンドラー（p004-event/pages/index.vue）

onPhoneSelected(event) {
  alert(`${event.vendor} ${event.name}を購入します。`)
}

コンポーネントの切り替え表示

　複数のコンポーネントを切り替え表示させる方法を、図5のサンプルで説明します。3つのボタンをクリックすると、対応したコンポーネントが切り替え表示されます。

図5：コンポーネントを切り替え表示するサンプル（p005-change）

　コンポーネントを切り替え表示するWebページの実装をリスト12に示します。

［リスト12］コンポーネントを切り替え表示するWebページ（p005-change/pages/index.vue）

<template>
  <div class="container">
    <h1>コンポーネントの切り替え表示</h1>
      <button v-on:click="onClickApple">Apple</button>
      <button v-on:click="onClickSamsung">Samsung</button>
      <button v-on:click="onClickSHARP">SHARP</button>
    <div v-bind:is="currentComponent"/><!-- コンポーネント表示 ...（1）-->
  </div>
</template>
<script>
import Apple from '~/components/Apple'
import Samsung from '~/components/Samsung'
import SHARP from '~/components/SHARP'
export default {
  components: { // コンポーネント ...（2）
    Apple,
    Samsung,
    SHARP
  },
  data() {
    return {
      currentComponent: 'Apple' // コンポーネント名 ...（3）
    }
  },
  methods: {
    // ボタン押下時にコンポーネント名を変更 ...（4）
    onClickApple() {
      this.currentComponent = 'Apple'
    },
    onClickSamsung() {
      this.currentComponent = 'Samsung'
    },
    onClickSHARP() {
      this.currentComponent = 'SHARP'
    }
  }
}
</script>

　切り替え表示するコンポーネントは（2）のApple、Samsung、SHARPです。コンポーネントを表示する場所は（1）で、「v-bind:is="currentComponent"」とディレクティブを設定すると、currentComponent変数（3）に設定された名前のコンポーネントが表示されます。ボタンクリック時の処理（4）で、currentComponent変数の内容を更新すると、対応するコンポーネントが切り替え表示されます。

まとめ

　本記事では、Nuxt.jsで利用できるVue.jsのコンポーネント機能について説明しました。コンポーネントを利用することで、開発効率や品質の向上、部品としての再利用が期待できます。

　次回は、Vue.jsのWebページで単一の状態を管理する状態管理パターン「Vuex」を利用する方法を説明します。

参考資料

• Nuxt.js
• Vue.js