[Vue.js] 커스텀 이벤트 작성 시 주의사항

 

📄 JS 

// camelCase로 작성하지 않고 kebab-case로 작성한다.
this.$emit(‘my-event’)

 

📄 HTML

<my-component v-on:my-event=“doSomething”>
	<!-- ... -->
</my-component>

커스텀 이벤트를 지정할 때, 이벤트 이름을 camelCase로 작성하고 위와같이 호출하면 아무런 동작을 하지 않는다.
myEvent로 작성 시에 v-on 이벤트리스너는 항상 자동으로 소문자 변환을 하기때문에 myEvent가 아닌 myevent로 변환되기 때문이다.
따라서 이벤트 이름은 kebab-case로 작성하는 것이 좋다.

 

 

 

출처

https://v3.ko.vuejs.org/guide/component-custom-events.html

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.