Vue.js(v3)でemitを使う(Composition API)

Vue.js
2021.08.06

Vue.js(v3)のComposition APIで、emitを使う方法を書いています。 emitについては、前回の記事に書いていますので確認してみてください。 [https://codelikes.com/vue-v2-emit/]

前回の記事で作成したコンポーネントと同じものをv3のComposition APIで使って作成してみます！ v3のemitについての公式のドキュメントは下記です。 [https://v3.vuejs.org/guide/migration/emits-option.html]

Vue.jsのComposition APIでemitを使う

Vue.jsのComposition APIを使用して、emitを使っている例を書きます。 前回書いた記事と同じコンポーネントを作っていきます。

子コンポーネントの実装例

まずは子コンポーネントです。下記のように実装しました。

<template>
  <div class="m-5">
    <button
      class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded"
      @click="$emit('eventTest1')"
    >testButton1</button>
    <button
      class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded ml-2"
      @click="$emit('eventTest2', 'パラメータ！')"
    >testButton2</button>
    <button
      class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded ml-2"
      @click="execEmit"
    >testButton3</button>
  </div>
</template>
<script>
export default({
  setup(props, context) {
    const execEmit = () => {
      context.emit('eventTest2', 'パラメータ1', 'パラメータ2');
    }

    return {
      execEmit
    }
  }
})
</script>

子コンポーネントの解説

今回はtailwindcssを使って、スタイルをつけてみました。

まず、emitをタグで使っている箇所です。 testButton1を押したときに、$emit('eventTest1')で親コンポーネントにeventTest1という名前で、カスタムイベントを飛ばしています。

testButton2を押したときには、$emit('eventTest2', 'パラメータ！')としています。eventTest2という名前で、親コンポーネントにイベントを飛ばします。第2引数の「パラメータ！」がイベントと一緒に送信するパラメータです。

タグの$emitについてはVue.jsのバージョン2と同じように使えますね。数値・配列・オブジェクトなどを渡すことが可能です。

つぎに、スクリプトの中でemitを使っている箇所です。 下記のようにcontext.emitとすることで、スクリプトからカスタムイベントを飛ばすことができます。

const execEmit = () => {
  context.emit('eventTest2', 'パラメータ1', 'パラメータ2');
}

contextはsetup関数の第2引数です。第１引数は親から子に渡される値を取得するための変数になります。 このように、setup関数に引数を書いて使います。不要な場合は引数を省略することが可能です。

setup(props, context) {
// ....
}

後は作成したexecEmitをtestButton3ボタンを押したときに呼び出しています。

親コンポーネントのemit実装例

次に親コンポーネントです。下記のように実装しました。

<template>
  <emit-child
    @eventTest1="test1"
    @eventTest2="test2"
  />
</template>

<script>
import EmitChild from './EmitChild.vue'
export default({
  components: {
    EmitChild
  },
  setup(props, context) {
    const test1 = () => {
      alert('emit test1!!!')
    }

    const test2 = (param1, param2) => {
      alert('emit test2 ' + param1 + ':' + param2)
    }

    return {
      test1,
      test2
    }
  }
})
</script>

親コンポーネントの解説

Vue.jsのバージョン2と同じようにカスタムイベントを受け取ることが可能です。

下記のように@カスタムイベント名code>@カスタムイベント名</codeでイベントを受け取っています。

  <emit-child
    @eventTest1="test1"
    @eventTest2="test2"
  />

@eventTest1code>@eventTest1</codeを受け取ったらtest1が実行されて、@eventTest2</code">code>test1が実行されて、@eventTest2</code</a>を受け取ったら<code>test2を実行しています。 それぞれの関数はスクリプトの中で実装しています。

const test1 = () => {
  alert('emit test1!!!')
}

const test2 = (param1, param2) => {
  alert('emit test2 ' + param1 + ':' + param2)
}

test1はアラートを単純に表示するのみで、test2は受け取ったパラメータを一緒にアラートに表示しています。

動作確認する

作成したコンポーネントを表示して、emitの挙動を確認してみます。

初回表示すると下記のようになります。 (tailwindcssでスタイルをつけたので、v2の実装例と違っていい感じのボタンになってます）

testButton1を押すと下記のように、表示されました。

testButton2を押すと、渡されたパラメータを使用してアラートが表示されました。 渡されなかった方はundefinedになります。

testButton３を押すと同じように「パラメータ１・パラメータ２」が親に渡されてアラートで表示されました。

Vue.jsのバージョン２と同じようにemitを使用することができました！ スクリプトの中で「emitを使用するときには、setup関数で受け取った第２引数を使う必要がある。」というところがv2と違いました。 バージョン3(Composition API)でemitを使用する場合でもスクリプトの中で使用する場合だけ、違いを気にしておけば良さそうです。

コメント