# $listeners の削除
breaking
# 概要
$listeners オブジェクトは Vue 3 で削除されました。イベントリスナは $attrs の一部になりました。
{
text: 'this is an attribute',
onClose: () => console.log('close Event triggered')
}
1
2
3
4
2
3
4
# 2.x での構文
Vue 2 では、コンポーネントに渡された属性は this.$attrs で、イベントリスナは this.$listeners でアクセスできます。
inheritAttrs: false と組み合わせることで、開発者はこれらの属性やリスナを、ルート要素ではなく他の要素に適用することができます:
<template>
<label>
<input type="text" v-bind="$attrs" v-on="$listeners" />
</label>
</template>
<script>
export default {
inheritAttrs: false
}
</script>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 3.x での構文
Vue 3 の仮想 DOM では、イベントリスナはプレフィックスに on がついた単なる属性になり、 $attrs オブジェクトの一部であるため、 $listeners は削除されました。
<template>
<label>
<input type="text" v-bind="$attrs" />
</label>
</template>
<script>
export default {
inheritAttrs: false
}
</script>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
もしこのコンポーネントが id 属性と v-on:close リスナを受け取った場合、 $attrs オブジェクトは次のようになります:
{
id: 'my-input',
onClose: () => console.log('close Event triggered')
}
1
2
3
4
2
3
4
# 移行の戦略
$listeners の使用をすべて削除します。
# 参照
← キーコード修飾子 マウント API の変更 →