Emit

Emit 에밋

• emit은 발산, 내뿜다라는 뜻이 있다.
• 하위 컴포넌트가 상위 컴포넌트와 통신 하기위해서는 하위에서 이벤트를 발생시켜 상위로 올린다.
• 이벤트를 올릴 때 사용하는 것이 $emit()이다.
• emit은 뷰에서 제공하는 api(기능)이다.
• v-on:하위 컴포넌트 이벤트="실행할 상위 컴포넌트 메소드"

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

<script>
  var appHeader = {
    template: '<button v-on:click="passEvent">Click me</button>', // 버튼을 클릭했을 때 실행될 함수(메소드) passEvent
    methods: {
      passEvent: function() {
        this.$emit('pass'); // 상위로 보낼 이벤트 pass
      }
    }
  }

  new Vue({
    el: '#app',
    components: {
      'app-header': appHeader
    },
    methods: {
      logText: function() {
        console.log('hi');
      }
    }
  });
<script>

• 버튼을 클릭 > passEvent 메소드의 pass란 이벤트가 발생 > pass는 logText라는 상위 컴포넌트 메소드를 실행

 

 

하위에서 하위로 이벤트 넘기기

• 하위에서 바로 하위로 넘길 수 없다.
• 하위 > 상위 > 하위로 넘거야 한다.

var appContent = {
    template: '<div>content<button v-on:click="passNum">pass</button></div>',
    methods: {
        passNum: function(){
            this.$emit('pass', 10);
        }
    }
}

- pass버튼을 클릭하하면 passNum메소드가 실행된다.

- passNum메소드는 emit으로 이벤트 pass와 인자 10을 상위 컴포넌트에 전달한다.

 

<app-content v-on:pass="deliverNum"></app-content>

- 이벤트 pass가 발생되면 상위컴포넌트(Root)의 메소드 deliverNum를 실행한다.

  (인자 value는 별도 선언하지 않아도 넘어옴) 

 

new Vue({
    el: '#app',
    components: {
        'app-header': appHeader,
        'app-content': appContent
    },
    data: {
        num: 0
    },
    methods: {
        deliverNum: function(value){
            this.num = value;
        }
    }
})

- num이라는 데이터를 미리 정의한다.

- 메소드 deliverNum은 value로 pass이벤트의 인자 10을 받는다.

- num을 받은 인자로 대치한다.

 

<app-header v-bind:getNum="num"></app-header>

- v-bind로 데이터 num을 넘기는데 하위 컴포넌트(appHeader)의 프롭스인 getNum이 받는다.

var appHeader = {
    template: '<h1>header</h1>',
    props: ['getNum']
}