Vue3 emitsオプションについて

初めに

皆さんこんにちは！
今回はVue3でシステムを実装時に新しくemitsオプションに出会ったのでこちらを記事にしたいと思います。

emitsオプションとは

まずはemitsオプションの概要から紹介させていただきます。
vue3アップデート時の新機能として追加されたオプションになります。

emit実行時にpropsと同じような形で、
受け取る際にバリデーションの実行や型の指定が可能になりました。

公式より
Vue 3 では emits オプションが、既存の props オプションと同様に提供されるようになりました。このオプションを使用して、コンポーネントが親に発行できるイベントを定義することができます。
Vue3 リファレンス

emitsの使い方

emitsはpropsのように構文設定することが可能になりました。
設定方法としては、2通りあって
1.配列での設定
2.オブジェクトでの設定

になります。

まずは公式の記述例を見ていきましょう。

const app = createApp({})

// 配列の構文
app.component('todo-item', {
  emits: ['check'],
  created() {
    this.$emit('check')
  }
})

// オブジェクトの構文
app.component('reply-form', {
  emits: {
    // バリデーションなし
    click: null,

    // バリデーションあり
    submit: payload => {
      if (payload.email && payload.password) {
        return true
      } else {
        console.warn(`Invalid submit event payload!`)
        return false
      }
    }
  }
})

いかがでしょうか。
まさしくpropsのような書き方なのでVue2を利用されていた方であれば理解が早いと思います。

オブジェクト構文で記述することで、
型指定やバリデーションの実装も可能になっております。

最後に

良いVue3ライフを！！

参考にさせていただいたサイト