# $listeners の削除
breaking

# 概要

$listeners オブジェクトは Vue 3 で削除されました。イベントリスナは $attrs の一部になりました。

{
  text: 'this is an attribute',
  onClose: () => console.log('close Event triggered')
}
1
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

# 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

もしこのコンポーネントが id 属性と v-on:close リスナを受け取った場合、 $attrs オブジェクトは次のようになります:

{
  id: 'my-input',
  onClose: () => console.log('close Event triggered')
}
1
2
3
4

# 移行の戦略

$listeners の使用をすべて削除します。

移行ビルドのフラグ: INSTANCE_LISTENERS

# 参照