같은 레벨, 관계 없는 컴포넌트 간의 통신
같은 레벨의 컴포넌트 간의 통신을 공통적인 상위 컴포넌트에 값을 전달해 이벤트를 받는 형식으로 구현된다.
하지만 이런 상황에서는 상위 컴포넌트가 필요없음에도 통신을 위해 상위 컴포넌트를 두어야한다.
이런 경우 이벤트 버스 형식을 사용하여 관계 없는 컴포넌트끼리 바로 데이터를 전달할 수 있다.
이벤트 버스
이벤트 버스를 구현하려면 애플리케이션 로직을 담는 인스턴스와는 별개로 새로운 인스턴스를 1개 더 생성하고, 새 인스턴스를 이용하여 이벤트를 보내고 받는다. 보내는 컴포넌트에는 .$emit()을, 받는 컴포넌트에는 .$on()을 구현한다.
//이벤트 버스를 위한 추가 인스턴스 1개 생성
var eventBus = new Vue();
//이벤트를 보내는 컴포넌트
methods: {
메서드명: function(){
eventBus.$emit('이벤트명', 데이터);
}
}
//이벤트를 받는 컴포넌트
methodes: {
created: function() {
eventBus.$on('이벤트명', function(데이터) {
~ 내용 ~
});
}
}
#예제 1
show 버튼을 클릭했을 때 이벤트 버스를 이용하여 상위 컴포넌트로 데이터를 전달하는 코드
(template에 어떤 이벤트가 발생하면 메소드가 호출되고, 메소드가 호출되었을 때 이벤트 버스 객체의 이벤트가 발생된다. 그리고 발생된 이벤트를 created에 있는 .$on에서 전달 받는다.)
<html>
<head>
<title>Vue sample</title>
</head>
<body>
<div id="app">
<child-component></child-component>
</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', {
template: '<div>하위 컴포넌트 영역입니다. <button v-on:click="showLog">show</button></div>', // 버튼 요소 추가
methods:{ // 메서드 추가
showLog: function() {
eventBus.$emit('triggerEventBus', 100); // 이벤트 발생 로직
}
}
});
var app = new Vue({
el:'#app',
created: function() {
eventBus.$on('triggerEventBus', function(value) {
console.log("received an event : ",value);
});
}
});
</script>
</body>
</html>
이벤트 버스를 활용하면 props 속성을 이용하지 않고도 원하는 컴포넌트 간에 직접적으로 데이터를 전달할 수 있어 편리하지만, 컴포넌트가 많아지면 어디서 어디로 보냈는지 관리가 되지 않는 문제가 발생한다. 이 문제를 해결하려면 Vuex(뷰엑스)라는 상태 관리 도구를 사용한다.
Vuex 참고 문서
Vuex가 무엇인가요? | Vuex
Vuex가 무엇인가요? Vuex는 Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리 입니다. 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를
vuex.vuejs.org
시작하기 | Vuex
시작하기 모든 Vuex 애플리케이션의 중심에는 store 가 있습니다. "저장소"는 기본적으로 애플리케이션 상태 를 보유하고있는 컨테이너입니다. Vuex 저장소가 일반 전역 개체와 두 가지 다른 점이
vuex.vuejs.org
'JavaScript > Vue.js' 카테고리의 다른 글
| [Do it! Vue.js 입문] 08. 뷰 HTTP 통신 - 뷰 리소스, 액시오스 (Vue Resource, Axios) (0) | 2021.09.02 |
|---|---|
| [Do it! Vue.js 입문] 07. 뷰 라우터 (네스티드 라우터, 네임드 뷰) (0) | 2021.09.01 |
| [Do it! Vue.js 입문] 05. 뷰 상위-하위 컴포넌트 간의 통신 (0) | 2021.08.10 |
| 이클립스 Spring 프로젝트에서 Vue.js 사용하기 (0) | 2021.08.06 |
| [Do it! Vue.js 입문] 04. 뷰 컴포넌트 (0) | 2021.08.02 |
| [Do it! Vue.js 입문] 03. 뷰 인스턴스 (0) | 2021.08.02 |
| [Do it! Vue.js 입문] 02. Vue.js 시작하기 (0) | 2021.07.30 |
