Event Emit
하위 컴포넌트에서 상위 컴포넌트로 이벤트를 올리는 방법
v-on: 하위컴포넌트 이벤트 이름=상위컴포넌트메소드명
하위 컴포넌트 이벤트가 발생했을 때 상위컴포넌트의 메서드가 실행된다.
<body>
<div id="app">
<!--
event emit
하위에서 상위 컴포넌트 : 이벤트를 올린다. event emit
하위 컴포넌트 이벤트가 발생했을 때 상위컴포넌트의 메서드가 실행된다.
<app-header v-on:하위 컴포넌트에서 발생한 이벤트 이름="상위컴포넌트의 메서드 이름"></app-header>
-->
<app-header v-on:pass="logText"></app-header>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var appHeader = {
//버튼을 클릭하면 passEvent 라는 메소드를 실행하겠다.
template : '<button v-on:click="passEvent">click me</button>',
methods :{
passEvent : function (){ //메소드함수 passEvent 생성
this.$emit('pass'); // 위쪽에 보내는 이벤트 이름 pass 정의
}
}
}
new Vue({
el: '#app',
components: {
'app-header' : appHeader
},
methods:{
logText:function (){ // 이벤트 이름 logText 정의
console.log('hi!');
}
});
</script>
</body>-
appHeader 컴포넌트의 template 에
v-on:click이벤트를 넣어, appHeader 클릭 시passEvent메소드를 실행시킨다. -
passEvent 메소드는 emit 으로
pass를 전달한다. -
<app-header v-on:pass="logText"></app-header>
app-header 에서passemit 이 상위 컴포넌트Root의 메소드logText를 실행시킨다. -
new Vue인스턴스 생성에 methodslogText가 정의되어 있다.
실행결과 :
<app-header>클릭 시 콘솔창에 'hi' 가 찍힌다.
연습 )
버튼을 클릭할 때마다 Vue 에 정의된 데이터 num 이 1씩 증가하게 만들어보자
<div id="app">
<app-content v-on:add="addNumber"></app-content>
</div>
<script>
var appContent = {
template: '<button v-on:click="increase">add</button>',
methods : {
increase : function(){
this.$emit('add')
}
}
}
new Vue({
el: '#app',
components: {
'app-content': appContent
},
methods:{
addNumber:function(){ //메소드함수 addNumber 정의
this.num++;
console.log(this.num);
}
},
data : {
num:10
}
});
</script>-
appContent 컴포넌트의 template 에서 v-on:click 을 통해
increase메소드를 실행시킨다.increase실행 때 emit 으로add가 발생한다. -
<app-content v-on:add="addNumber"></app-content>
addemit 이 상위컴포넌트의 메소드addNumber를 실행시킨다.
-
new Vue 에 정의된 메소드
addNumber가 실행되면서 내부 함수가 new Vue 의 datanum을 증가시키고 콘솔창에 값을 찍는다.
실행결과 :
<app-content>버튼을 클릭할 때마다 콘솔창에 11부터 1씩 증가된 값이 찍힌다.
