Nuxt2->Nuxt3移行備忘録 `defineEmits` #Vue.js

defineEmits は Vue 3 の Composition API の一部です。この API は、コンポーネント内部でイベントのエミット（発火）を定義するために使用されます。

defineEmitsサンプルコード

<template>
  <div>
    <button @click="feedAnimal('Lion')">ライオンさんにご飯をあげる🍖</button>
    <button @click="feedAnimal('Elephant')">ゾウさんにご飯をあげる🍏</button>
  </div>
</template>

<script setup lang="ts">
const emit = defineEmits<{
  (event: 'feed', animal: string): void;
}>()

function feedAnimal(animal: string) {
  emit('feed', animal)
}
</script>

この例では、defineEmits関数を使ってfeedというイベントを定義し、このイベントは動物の名前を表す文字列パラメータを取ります。feedAnimal関数は、ボタンがクリックされたときにこのイベントを発火します。

defineEmitsが用いられる理由

型安全性: TypeScriptと一緒にdefineEmitsを使用すると、イベントとそのペイロードが型チェックされ、ランタイムエラーの可能性が減少します。
簡潔さ: setup関数内でイベントを定義および使用するための構文が簡素化され、コードが読みやすく、保守しやすくなります。
Composition APIとの統合: defineEmitsはComposition APIとシームレスに統合され、より一貫性のある整理されたコンポーネント構造を可能にします。

defineEmitsと同等の機能を持つVue 2のコード

import Vue from 'vue'

export default Vue.extend({
  methods: {
    feedAnimal(animal) {
      this.$emit('feed', animal)
    }
  },
  template: `
    <div>
      <button @click="feedAnimal('Lion')">ライオンさんにご飯をあげる🍖</button>
      <button @click="feedAnimal('Elephant')">ゾウさんにご飯をあげる🍏</button>
    </div>
  `
})

この例では、feedAnimalメソッドがthis.$emit関数を使ってfeedイベントを動物のパラメータとともに発火しています。

defineEmits公式ドキュメンテーションのURL

クイズ

1. Vue 3でdefineEmitsを使用する主な目的は何ですか？

a) コンポーネントのスタイルを定義するため
b) コンポーネントのイベントを処理するため
c) propsの型を定義するため
d) 状態を管理するため

2. 先述のサンプルコードで親コンポーネントに向けて発火されているイベント名は何ですか？

a) 'animalFeed'
b) 'feedAnimal'
c) 'feed'
d) 'feedEvent'

4. Vue 2でイベントの発火を定義する同等の方法はどれですか？

a) defineEmits関数を使用する
b) PropTypeを使用して、propsオブジェクトでpropsを定義する
c) メソッド内でthis.$emitを使用する
d) 直接setup関数を使用する

答え

b) コンポーネントのイベントを処理するため
c) 'feed'
c) メソッド内でthis.$emitを使用する

Nuxt2->Nuxt3移行備忘録 `defineEmits`

目次