event-emit

하위 컴포넌트에서 상위 컴포넌트로 통신!

이벤트 발생은 컴포넌트의 통신 방법 중 하위 컴포넌트에서 상위 컴포넌트로 통신하는 방식이다.

 	let appContet = {
        template: "<button v-on:click='addEvent'>add</button>",
        methods: {
          addEvent: function () {
            this.$emit("add");
          },
        },
      };

위는 하위 컴포넌트의 코드다.
해당 버튼에서 클릭 이벤트가 발생하면 addEvent가 실행된다.
이 method에서 this.$emit("add");은 상위 컴포넌트로 보내는 통신 방법이다.

<!-- <app-header v-on:하위 컴포넌트에서 발생한 이벤트 이름="상위 컴포넌트의 메서드 이름"></app-header> -->
<app-content v-on:add="addNumber"></app-content>

상위 컴포넌트에 선언된 하위 컴포넌트 태그에서 emit에 발생한 이벤트 이름을 바인딩하고,
상위 컴포넌트의 메서드 이름을 넣어주면, 상위 컴포넌트의 메서드가 실행된다.

	methods: {	
          addNumber: function () {
            this.num += 1;
            console.log(this.num);
          },
     },
     data: {
          num: 0,
     },

최종적으로 실행되는 건 하위 컴포넌트의 버튼을 클릭할 때 마다
상위 컴포넌트의 data 속성의 num이 1씩 증가하고,
그 증가한 값이 console에 찍혀 나오는 걸 확인할 수 있다.