오늘은 step 10. eventBus 컴포넌트 간 데이터 전달에 대해 포스팅하려고 합니다.
컴포넌트 간의 데이터 전달은 총 2가지가 있습니다.
첫 번째 방법은 서로 컴포넌트끼리 연결되어 event-emit(부모로 전달), props(자식으로 전달)의 형태로
사용되는 데이터 전달 방법이 있고,
두 번째 방법은 서로 관계없는 컴포넌트끼리 데이터를 전달하는 eventBus의 연결 방법이 있습니다.
바로 앞에 첫번째 방법에 대해 포스팅했기 때문에,
오늘은 두번째 방법인 서로 관계없는 컴포넌트끼리 데이터를 전달하는 eventBus 방식에 대해 진행하겠습니다.
eventBus는 컴포넌트간에 상위(부모), 하위(자식) 관계가 없더라도 데이터를 전달할 수 있다는 장점이 있지만,너무 많이 사용하면 관리가 안된다는 단점도 있습니다.eventBus는 다음과 같이 사용할 수 있습니다.eventBus 인스턴스를 생성하고
$emit(이벤트 생성), $on(이벤트 불러오기), $off(이벤트 제거)
형태로 간단하게 이용할 수 있습니다.
//eventBus 인스턴스 생성
var eventBus = new Vue({});
//eventBus $emit으로 send 이벤트 생성
//eventBus.$emit('이벤트 이름',데이터 이름)
eventBus.$emit('send-num',this.num)
//eventBus $on로 receive
//eventBus.$on('이벤트 이름',정의된 함수 이름)
eventBus.$on('send-num',this.receive)
//eventBus $off로 이벤트 이름 제거
//eventBus.$off('이벤트 이름');
eventBus.$off('send-num');
아래 예제 소스코드를 통해 알아보도록 하겠습니다.
event-bus.html을 만들고, 기본 html에서 vue를 활용해 보겠습니다.
서로 다른 인스턴스 즉 서로 다른 컴포넌트를 sendApp과 receiveApp으로 2개를 생성하였습니다.
sendApp에서 num data를 eventBus를 이용하여 receiveApp에 있는 num으로 값을 전달하고자 합니다.
eventBus를 사용하기 위해서는 eventBus 또한 인스턴스를 별도로 생성해 주어야 합니다.
서로 다른 인스턴스끼리 연결점이 없는 것을 eventBus가 필요에 따라 데이터를 전달해주는
연결 고리가 된다고 생각하시면 이해하기 좋을 것 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
#send-app{
background-color: #ff5722;
color:white;
}
#receive-app{
background-color: #0075ff;
color:white;
}
</style>
<div id="send-app">
<p>send-app zone</p>
<p>{{message}}</p>
<p><button v-on:click="send">send-button</button></p>
</div>
<div id="receive-app">
<p>receive-app zone</p>
<p>receive-num : {{num}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//eventBus 인스턴스 생성
var eventBus = new Vue({});
var sendApp = new Vue({
el: '#send-app',
data: {
message:'bono915.tistory.com 환영합니다.',
num:915
},
methods: {
send(){
//eventBus $emit으로 send
//eventBus.$emit('이벤트 이름',데이터 이름)
eventBus.$emit('send-num',this.num)
}
}
});
var receiveApp = new Vue({
el: '#receive-app',
data: {
num:0
},
methods: {
receive(data){
this.num = data
}
},
created: function(){
//eventBus $on으로 receive
//eventBus.$on('이벤트 이름',정의된 함수 이름)
eventBus.$on('send-num',this.receive)
}
});
</script>
</body>
</html>
Visual Studio Code에서 event-bus.html를 마우스 우클릭 후 "Open with Live Server"
또는 키보드로 Alt +L + O 실행하면 다음과 같은 브라우저에 결과물이 나타납니다.
개발자 도구(F12) vue 탭에서 보면, sendApp의 num: 915 데이터가 eventBus를 통해
receiveApp의 data {num} 에 전달된 것을 확인할 수 있습니다.
지금까지 Vue.JS step 10. eventBus 컴포넌트간 데이터 전달에 대한
포스팅이었습니다.
'Develope > Vue.JS' 카테고리의 다른 글
| [Vue.JS] step 11. axios 비동기 서버 통신 (0) | 2022.05.25 |
|---|---|
| [Vue.JS] step 9. 같은 컴포넌트 레벨의 데이터 전달(자식1 -> 자식2) (0) | 2022.05.20 |
| [Vue.JS] step 8. event-emit 데이터 전달(자식 ->부모) (0) | 2022.05.18 |
| [Vue.JS] 보간법 디렉티브(Directive) v-bind, v-on 약어 (0) | 2022.05.17 |
| [Vue.JS] step 7. props 데이터 전달(부모 -> 자식) (2) | 2022.05.16 |
