$emit(), v-on:

하위에서 상위 컴포넌트로 이벤트 전달하기

 

이벤트를 발생시켜 (event emit) 상위 컴포넌트에 신호를 보냄

상위 컴포넌트에서 하위 컴포넌트의 특정 이벤트가 발생하기를 기다리고 있다가 하위 컴포넌트에서 특정 이벤트가 발생하면 상위 컴포넌트에서 해당 이벤트를 수신하여 상위 컴포넌트의 메서드를 호출

 

- 이벤트 발생

this.$emit('이벤트명');

 

- 이벤트 수신

<child-component v-on:이벤트명="상위 컴포넌트의 메서드명"></child-component>

 

<div id="app">
	<child-component v-on:show-log="printText"></child-component>
</div>

<script>

Vue.compoent('child-component', {
	template: '<button v-on:click="showLog">show</button>',
    methods: {
    	showLog: function() {
        	this.$emit('show-log');
        }
    }
});

var app = new ({
	el: '#app',
    data: {
    	message: 'Hello Vue! passed from Parent Componet'
    },
    methods: {
    	printText: function() {
        	console.log("received an event")
        }
    }
});

</script>