[Vue] 컴포넌트 이벤트 핸들링할 때 변수로 이름 지정하기

Vue에서 컴포넌트 간에 데이터를 넘기고, 이벤트를 발생시키고 받아서 처리하는 것은 매우 중요하고 또 흔하게 사용되는 방식이다.

자식 컴포넌트에서 emit시킨 이벤트는 주로 v-on, @를 통해서 지정하여 발생한 이벤트에 대한 처리를 많이 하게 된다.

<MyComponent @click="onClick" />

그런데, 같은 컴포넌트를 여러 번 사용하거나 이벤트 명이 겹치는 경우가 발생할 수 있다.
(물론, 서로 다른 이벤트의 경우 이벤트 명이 겹치는 일 자체를 먼저 피해야할 것이고, 자식의 자식에서 발생할 때에는 stop이나 prevent를 사용하는 방법도 있다.)

그럴 때 string 구문을 사용해서 dynamic하게 구독할 이벤트 명을 지정해줄 수 있다. 아래에 작성하겠지만, 방법 자체는 꽤 간단한데 구글링 등 검색했을 때 잘 나오지 않아 따로 포스팅으로 정리한다.

<MyCompontnt @[`click-${myVar}`]="click" />

myVar라는 변수 값을 읽어서 string에 합쳐서 이벤트를 처리하게 된다.