emit
-
Vue.js - 하위 컴포넌트에서 상위 컴포넌트 통신 ($emit)IT/Vue.js 2020. 7. 24. 11:09
전에 포스팅들은 부모에서 자식으로 데이터를 전달하는 것을 알아봤습니다. 때로는 하위 컴포넌트에서 상위 컴포넌트로 데이터를 보내거나 메소드를 호출하기도 합니다. 하위 컴포넌트로 상위 컴포넌트의 이벤트를 발생하여 메소드를 호출해보도록 하겠습니다. 이벤트 발생과 수신은 $emit과 v-on 속성을 사용합니다. 1. 이벤트 발생 코드 형식 하위 컴포넌트의 메소드에 아래와 같이 코드를 작성합니다. // 하위 컴포넌트의 내용 this.$emit('이벤트 명'); 그리고 나서 해당 이벤트를 수신하기 위해 상위 컴포넌트의 HTML을 아래와 같이 구현합니다. 그럼 예시로 구현을 해보겠습니다. 2. 하위 컴포넌트 작성 (ChildEmit.vue) 하위 컴포넌트는 'Emit 클릭 !' 이라는 버튼을 클릭하면 sendEven..