[Vue.js] event emit

고명빈·2021년 9월 22일
0

Vue.js

목록 보기
1/1

a. emit?

자식 컴포넌트의 데이터를 부모 컴포넌트에 전달하고자 할때, 사용되는 event이다.

b. code

해당 이미지는 간단한 emit 예제 코드로, 'app-content'(자식 컴포넌트)의 버튼을 클릭 했을 때, Root(부모 컴포넌트)의 메서드를 호출한다.
'app-content'(자식 컴포넌트)의 버튼을 클릭을하면, v-on:click 속성으로 인해, 'addNumber' 이벤트가 발생하고, 해당 이벤트 내에는 $emit로 'increase' 속성을 상위 컴포넌트로 전달한다. increase 속성 내에는 'addDataNum'을 값으로 갖고 있기 때문에, 상위 컴포넌트의 해당 메서드를 호출하게 된다.

0개의 댓글