[vue.js] $listeners

$listeners 란?

자식에서 부모에게 전달되는 이벤트를 모아놓은 객체이다.

네이티브 이벤트를 컴포넌트에 바인딩 할때 사용한다.

v-on="listeners"를 사용해 이벤트를 바인딩 해준다.

$listeners 속성을 이용하면 컴포넌트에서 v-on="listeners"를 이용해 부모 엘리먼트가 가진 이벤트 리스너를 특정 자식 엘리먼트에게 전달할 수 있다. 가령 input 같은 엘리먼트에 v-model를 적용하고 싶은 경우라면, 아래와 같이 listeners 같은 새로운 computed 속성을 생성하여 유용하게 할용할 수 있다.

<template>
	<input v-on="listeners"/>
</template>

<script>
export default{
	computed:{
    	listeners(){
        	return{
            	...this.$listeners
                //이벤트 리스너 재정의 하고 싶을때
                change:() => {}
                keyup:() => {}
                input:() => {}
            }
        }
    }
}
</script>