Vue3 에서 router-link 에 이벤트 추가 방법

안녕하세요 :)

router-link 에 이벤트를 바인딩 하기 위해서는 <router-link @click="핸들러" />를 사용할 수 있습니다.

Vue2에서 .native를 이용하여 자식 컴포넌트의 루트 요소에 이벤트를 추가할 수 있었습니다.
Vue3에서는 .native가 deprecated 되었습니다.

대신 Vue3에서는 새롭게 등장한 emits 옵션을 활용하여 자식 루트 요소의 바인딩 여부를 결정할 수 있습니다.

• 만약 emits 옵션에 지정할 경우 > 자식 루트 요소의 바인딩에 제외가 되며

• 만약 emits 옵션에 지정하지 않은 경우 > 자식 루트요소에 바인딩이 됩니다.
  (기존 .native 대체, 이러한 속성은 Non-Prop 또는 fallthrough 속성 이라고 함)

추가적으로

• Non-Props 속성의 루트 요소의 바인딩을 막으려면 inheritAttrs 옵션을 사용할 수 있습니다.

• 루트 요소 말고 다른 요소나 컴포넌트에 바인딩을 하려면 $attrs 속성을 사용할 수 있습니다.

이러한 내용은 Fallthrough 속성, inheritAttrs, $attrs에 관한 지식을 숙지하시면 이해하시는데 도움이 되실거에요.

그리고 이러한 내용은 기본편[컴포넌트 기초 & 심화 > Non-Prop 속성]에서 자세히 다루고 있습니다.

감사합니다.