✅ 컴포넌트 통신 방법 (하위 컴포넌트 ➡️ 상위 컴포넌트)

이벤트 발생 코드 형식

하위 컴포넌트의 메서드나 라이프 사이클 훅과 같은 곳에 아래와 같이 코드를 추가한다.

// 하위 컴포넌트의 내용
this.$emit('이벤트 명');

그리고 나서 해당 이벤트를 수신하기 위해 상위 컴포넌트의 템플릿에 아래와 같이 구현한다.

<!-- 상위 컴포넌트의 템플릿 -->
<div id="app">
  <app-header v-on:이벤트 명="상위 컴포넌트의 실행할 메서드 명 또는 연산"></app-header>
</div>

이벤트 코드 예시

// 하위 컴포넌트 : appHeader
var appHeader = {
  template: '<button v-on:click="passEvent">click</button>',
  methods: {
    passEvent: function () {
      this.$emit('pass');
    },
  },
};

// 상위 컴포넌트 : root 컴포넌트
new Vue({
  el: '#app',
  components: {
    'app-header': appHeader,
  },
  methods: {
    logText: function () {
      console.log('hi');
    },
  },
});

<div id="app">
  <app-header v-on:pass="logText"></app-header>
</div>

위 코드는 하위 컴포넌트인 appHeader에서 passEvent() 메서드가 실행되면 pass 라는 이벤트가 발생되고, 이를 상위 컴포넌트인 루트 컴포넌트의 v-on 디렉티브로 이벤트를 받아 logText() 메서드를 실행하는 코드이다.

실행 결과는 콘솔 창에서 hi 라고 출력된다.