[Vue.js] $emit 자식->부모 이벤트 잡기

1. 부모에서 자식 사용자 정의 태그에서 v-on 디렉티브로 이벤트를 핸들한다. 

 

 

<!-- 부모 측 템플릿 -->
<div id="app"> 
        <child-component v-on:childs-event="parentsMethod"></child-component>
</div>

 

 

 

2. 자식은 $emit 으로 자신의 이벤트인 childs-event 를 실행한다. 

$emit 의 두 번째 이후의 매개변수로 임의의 데이터를 지정할 수 있다. 

 

3. 부모는 자식 이벤트를 통지받아 미리 등록한 핸들러를 호출한다. 

 

//자식이 자신의 이벤트 실행
Vue.component('child-component', {
    template: '<button v-on:click="handleClick">이벤트 호출하기</button>',
    methods: {
        //버튼 클릭 이벤트 핸들러에서 childs-event 호출하기
        handleClick: function(){
            this.$emit('childs-event')
        }
    }
})
//부모쪽에서 이벤트 받기
new Vue({
    el:'#app',
    methods: {
        //childs-event가 호출된 경우
        parentsMethod: function(){
            alert('이벤트 받음')
        }
    }
})

 

 

자식 컴포넌트의 버튼을 클릭하면 부모 컴포넌트에서 등록한 핸들러가 호출되어 alert 이 출력된다.