# $listeners 제거됨
breaking

# 개요

Vue 3에서 $listeners 객체가 제거되었습니다. 모든 리스너는 이제 $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를 지웁니다.

# 참고

Deployed on Netlify.
Last updated: 2021-04-29, 13:42:53 UTC