[Vue.js] native 이벤트

Native Event

vue.js로 개발을 하던 도중 태그에 click, foucs, blur와 같은 이벤트가 먹히지 않아 해결방법을 찾던 중에 .native를 사용하면 이벤트를 쓸 수 있다는 글을 찾고 사용해서 해결했다. 근데 .prevent, .stop은 써봤어도 .native는 처음 봤던 코드인데 "도대체 .native가 뭔데 되는건데?" 라는 생각을 했다.

공식 문서에서는 .native에 대해 아래와 같이 설명하고 있다.

"컴포넌트에서 루트 엘리먼트의 네이티브 이벤트를 직접 감지하고 싶은 경우에 사용한다."

솔직히 위 설명만 봤을 때는 이해가 가지 않는다. 네이티브는 v-on 이벤트 장식자로 취급되는데 컴포넌트의 루트 요소 위에 있는 네이티브 이벤트를 호출한다. 선언법은 아래와 같다.

<컴포넌트명 @이벤트핸들러.native="이벤트함수명"></컴포넌트명>

보통의 경우 위의 구조와 같이 하위 컴포넌트에 버튼을 두고 상위컴포넌트의 이벤트를 전달하기 위해서 $emit을 이용하는 것이 보통이다. 하지만 상위컴포넌트의 이벤트를 호출하고 싶을 때, 이벤트를 호출해도 작동하지 않는다. 그 이유는 vue 구성요소가 기본 요소에 바인딩하려고 하기 때문이다. 네이티브를 붇인다면 기본요소를 무시하고 상위컴포넌트에 있는 이벤트를 실행시킨다.