[Vue.js] emit

👉 emit

다른 Component에게 현재 Component의 Event나 Data를 전달하기 위해 사용

  <div id="app">
    <p>{{ num }}</p>
    <app-header v-on:pass="logText"></app-header>
    <app-content v-on:increase="increaseNumber"></app-content>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script>
    var appHeader = {
        template: '<button v-on:click="passEvent">click me</button>',
        methods: {
            passEvent: function(){
                this.$emit('pass');
            }
        }
    }
    var appContent= {
        template: '<button v-on:click="addNumber">add</button>',
        methods: {
            addNumber: function() {
                this.$emit('increase')
            }
        }
    }
    new Vue({
        el: '#app',
        components: {
            'app-header': appHeader,
            'app-content': appContent
        },
        methods: {
            logText: function() {
                console.log('hi');
            },
            increaseNumber: function() {
                this.num =  this.num + 1
            }
        },
        data: {
            num: 10
        }
    });
  </script>

🙌 말로 풀어보기

v-on:click 를 이용하여 이벤트 핸들러를 가져온다.
클릭을 하여 상위 컴포넌트로 이벤트를 보내기 위해 메서드 이름을 적는다.

해당 컴포넌트에 메서드 함수를 넣고
$emit으로 이름을 붙혀주고 이벤트를 보낸다.

<!-- 이벤트 받을 곳 -->
<app-header v-on:"하위 컴포넌트에서 발생한 이벤트 이름"="상위 컴포넌트의 메서드 이름"></app-header>
<!-- 이벤트 보낼 곳 -->
<button v-on:click="메서드 이름">add</button>

클릭할때마다 메서드 이름으로 실행이 됨

pass $emit by <app-header>

app-header에서 $emit(이벤트)가 발생되는데 pass라는 이벤트가 발생

😥 어려워서 다시 풀어보기

이벤트 발생할 해당 컴포넌트 메서드에 함수(ex:passEvent)가 있음
이벤트 발생할 컴포넌트(버튼)에 걸려있는 v-on:click 로 함수(ex:passEvent)가 발생
함수 안에 $emit을 작성하고 이름을 넣어줌

여기까지
$emit(ex:pass) 로 데이터를 전달

데이터 받을 컴포넌트에 v-on:$emit(ex:pass)를 넣음
여기로 데이터나 이벤트 들어감

무슨 데이터? 무슨 이벤트 ?
그건 v-on:pass="가지고 올 것" 이렇게 작성한다.
상위 컴포넌트에 있는 메서드나 데이터를 적어주면 된다.