상위 → 하위 데이터 전달(props)
하위 → 상위 이벤트 전달(emit)
같은 레벨 간 통신: 공통 상위 컴포넌트를 경유하여 emit과 props를 활용하여 전달한다. 불필요하게 상위 컴포넌트를 두어야 하는 경우가 생긴다. 이러한 단점을 해결하는것이 이벤트 버스이다.
관계 없는 컴포넌트 간 통신: 이벤트 버스를 활용한다. 이벤트 버스용 뷰 객체 생성 후 emit과 on을 활용하여 구현한다.
<!DOCTYPE html>
<html>
<head>
<title>Vue Component Comm</title>
</head>
<body>
<div id="app">
<child-component v-bind:propsdata="message"></child-component>
<child-component-2 v-on:child-event="childEvent"></child-component-2>
<child-component-3></child-component-3>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
var eventBus = new Vue();
Vue.component('child-component', {
props: ['propsdata'],
template: '<p>{{ propsdata }}</p>'
});
Vue.component('child-component-2', {
template: '<button v-on:click="emitEvent">ChildEvent</button>',
methods: {
emitEvent: function() {
this.$emit('child-event');
}
}
});
Vue.component('child-component-3', {
template: '<button v-on:click="sendData">EventBus</button>',
methods: {
sendData: function() {
eventBus.$emit('triggerEventBus', 'Oh, passed through the EventBus');
}
}
});
new Vue({
el: '#app',
data: {
message: 'Hello Vue! passed from parent component'
},
methods: {
childEvent: function() {
this.message = "Received an event from Child-Component";
},
onReceive: function(value) {
this.message = value;
}
},
created: function() {
eventBus.$on('triggerEventBus', this.onReceive);
}
});
</script>
</body>
</html>'Frontend' 카테고리의 다른 글
| Vue.js (6) HTTP 통신 (0) | 2020.04.23 |
|---|---|
| Vue.js (5) 라우터 (0) | 2020.04.21 |
| Vue.js (3) 인스턴스와 컴포넌트 (0) | 2020.04.11 |
| Vue.js (2) 환경구축 (0) | 2020.04.11 |
| Vue.js (1) 시작 (0) | 2020.04.08 |
