Vue.js Emit

자식은 events를 통해 부모에게 메시지를 보낸다.

 

하위 컴포넌트에서 상위 컴포넌트로의 통신방법은 하위 컴포넌트에서 이벤트를 발생시켜서 상위 컴포넌트 메소드를 트리거한다.

 

https://kr.vuejs.org/v2/guide/components.html

 

1. 코드형식

 

//하위 컴포넌트에서 이벤트 호출
this.$emit('이벤트 명');

//상위 컴포넌트 이벤트 수신   방향을 ----> 로 읽으면 편함 하위 이벤트가 상위 메소드를 트리거!!
<div id="app"> 
  <child-component v-on:이벤트 명="상위 컴포넌트에서 실행될 메서드"></child-component>
</div>

 

 

2. 이벤트 예시

 

<div id="app">
    <child-component v-on:son-call-parent="parentCalled"></child-component>
</div>

   
Vue.component('child-component', {
  template: '<button v-on:click="myMethodCall">show</button>',
  methods: {
    myMethodCall: function() {
      this.$emit('son-call-parent');
    }
  }
});

new Vue({
  el: '#app',
  methods: {
    parentCalled: function() {
      console.log("이벤트 잘 받음!!");
    }
  }
});

//결과 : 이벤트 잘 받음!!