コンポーネントのイベントを定義するemits [Vue.js]

今回は、コンポーネントに定義できるemitsオプションについて紹介します。

1 emitsオプション
2 emitsオプションの構文
3 emitsオプションと$attrsプロパティ

emitsオプション

Vue.jsのバージョン3では、コンポーネントのプロパティを表すpropsオプションと同様に、イベントを表すオプションとしてemitsが追加されました。

emitsオプションを使用することで、コンポーネントが親に発行できるイベントを定義することができます。

emitsオプションはコンポーネントから出力できるカスタムイベントのリスト（ハッシュ）です。
emitsオプションには、単純な配列ベースの構文と、イベントを検証できるオブジェクトベースの構文が利用できます。　　

emitsオプションの構文

配列ベースの構文では、emitsオプションにイベント名を定義します。

app.component('my-component', {
  emits: ['created-event', 'mounted-event'],
  created() {
    this.$emit('created-event')
  },
  mounted() {
    this.$emit('mounted-event')
  }
})

app.component('my-component', {

emits: ['created-event', 'mounted-event'],

created() {

this.$emit('created-event')

mounted() {

this.$emit('mounted-event')

}

})

オブジェクトベースの構文では、各プロパティの値にnull、または検証関数のいずれかを指定します。

app.component('reply-form', {
  emits: {
    // 検証なし
    click: null,

    // 検証あり
    submit: function(payload) {
      if (payload.email && payload.password) {
        return true;
      }
      else {
        console.warn(`submitイベントのpayload（ペイロード）が無効です。`)
        return false;
      }
    }
  }
})