# emits オプション
new
# 概要
Vue 3 では emits オプションが、既存の props オプションと同様に提供されるようになりました。このオプションを使用して、コンポーネントが親に発行できるイベントを定義することができます。
# 2.x の挙動
Vue 2 では、コンポーネントが受け取るプロパティを定義することはできますが、コンポーネントが発行できるイベントを宣言することはできません。
<template>
<div>
<p>{{ text }}</p>
<button v-on:click="$emit('accepted')">OK</button>
</div>
</template>
<script>
export default {
props: ['text']
}
</script>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 3.x の挙動
プロパティと同様に、コンポーネントが発行するイベントは emits オプションで定義できるようになりました。
<template>
<div>
<p>{{ text }}</p>
<button v-on:click="$emit('accepted')">OK</button>
</div>
</template>
<script>
export default {
props: ['text'],
emits: ['accepted']
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
このオプションはオブジェクトも受け取ります。これにより開発者は、発行されたイベントと一緒に渡される引数のバリデータを props 定義のバリデータと同様に定義できます。
詳細については、この機能の API ドキュメントをお読みください。
# 移行の戦略
各コンポーネントから発行されたすべてのイベントを、 emits を使って発行することを強くお勧めします。
これは .native 修飾子の削除 のために特に重要です。 emits で宣言されていないイベントのリスナーは、コンポーネントの $attrs に含まれるようになり、デフォルトではコンポーネントのルートノードに束縛されます。
# 例
ネイティブイベントを親に再発行するコンポーネントでは、これにより2つのイベントが発火することになります。
<template>
<button v-on:click="$emit('click', $event)">OK</button>
</template>
<script>
export default {
emits: [] // 宣言されていないイベント
}
</script>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
親がコンポーネントの click イベントをリッスンする場合:
<my-button v-on:click="handleClick"></my-button>
1
これは 2回 引き起こされます。
$emit()から一度。- ルート要素に適用されたネイティブイベントリスナから一度。
ここでは2つの選択肢があります。
clickイベントを適切に宣言する。これは<my-button>のイベントハンドラに何らかのロジックを実際に追加する場合で役立ちます。.nativeを追加しなくても、親は簡単にネイティブイベントをリッスンできるので、イベントの再発行を削除します。とにかく明らかにイベントを再発行するだけの場合に適しています。
# 参照
← Data オプション イベント API →