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