Vue3 emits 属性

Vue3 选项式 APIVue3 Options API

Vue3 では、emits属性は、コンポーネントがトリガーできるイベントを定義するために使われます。

emitsこれは配列またはオブジェクトであり、コンポーネントがトリガーするカスタムイベントを明確に宣言するために使われます。

を介してemits属性により、開発者はコンポーネントのイベントをより適切に管理し、コードの可読性と保守性を向上させることができます。

なぜ emits 属性を使うのか？

Vue2 では、親コンポーネントはv-on子コンポーネントのイベントを監視し、子コンポーネントは$emitメソッドでイベントをトリガーします。この方法はシンプルで直接的ですが、プロジェクトの規模が大きくなるにつれて、イベントの管理が混乱する可能性があります。Vue3 はemits属性を導入し、次のような利点があります：

  1. 明確なイベント宣言：によってemits属性により、開発者はコンポーネントがトリガーするイベントを明確に知ることができます。
  2. コードの可読性：コンポーネント内で確認するemits属性により、コンポーネントのイベント連携をすばやく理解できます。
  3. 型チェックと警告：トリガーされたイベントがemits内で宣言されていない場合、Vue は開発モードで警告を発し、開発者が潜在的な問題を発見するのに役立ちます。

emits 属性の使い方

1. 基本的な使い方

コンポーネント内では、emits配列にすることができ、配列にはすべてのカスタムイベント名を列挙します。

例

<script>
export default {
  emits: ['update:modelValue', 'submit'],
  methods: {
    handleClick() {
      this.$emit('submit', 'Form submitted!');
    }
  }
}
</script>

上記の例では、emits配列は宣言していますupdate:modelValueとsubmit2つのイベント。呼び出すとthis.$emit('submit', 'Form submitted!')場合、トリガーされますsubmitイベント、およびデータを渡します。'Form submitted!'。

2. オブジェクトの使い方

emitsオブジェクトにすることもできます。オブジェクトのキーはイベント名で、値は検証関数です。検証関数は、渡されたイベント引数が有効かどうかをチェックするために使用されます。

例

<script>
export default {
  emits: {
    submit: (payload) => {
      if (typeof payload === 'string') {
        return true;
      } else {
        console.warn('Submit event payload must be a string!');
        return false;
      }
    }
  },
  methods: {
    handleClick() {
      this.$emit('submit', 'Form submitted!');
    }
  }
}
</script>

この例では、submitイベントの検証関数はpayloadが文字列かどうかをチェックします。文字列でない場合は、コンソールに警告メッセージを出力します。

3. v-model と組み合わせて使う

emits属性は常にv-model一緒に使用され、特にカスタムコンポーネントでの双方向バインディングを処理します。

例

<template>
  <input :value="modelValue" @input="updateValue" />
</template>

<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  methods: {
    updateValue(event) {
      this.$emit('update:modelValue', event.target.value);
    }
  }
}
</script>

この例では、入力フィールドの値が変化すると、update:modelValueイベントがトリガーされ、新しい値が親コンポーネントに渡されます。

注意事項

  1. イベント名の大文字と小文字：Vue のイベント名は大文字と小文字を区別しませんが、kebab-case（ハイフン区切り）の命名方式を使用することをお勧めします。
  2. 検証関数の戻り値：検証関数がfalseを返す場合、Vue は開発モードで警告を発しますが、イベントは引き続きトリガーされます。
  3. デフォルトイベント：一部のネイティブイベント（例：click）は、emitsで宣言する必要はありません。ただし、それらの引数を検証する必要がある場合を除きます。

Vue3 选项式 APIVue3 Options API

その他の拡張