고정 헤더 영역
상세 컨텐츠
본문
◆ 동일 레벨 컴포넌트 통신방식
- 두 개의 컴포넌트가 같은 레벨에 있을 때 통신하는 방법
- 직접 전달은 없고, 부모-자식 간의 전달을 통해 통신이 가능하다!!
Step1. 하위컴포넌트에서 $emit()으로 이벤트를 발생
Step2. 상위컴포넌트에서 v-on:으로 이벤트 수신
Step3. 하위컴포넌트들에게 props로 데이터 전달
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<body>
<div id="app">
<app-header v-bind:propsdata="num"></app-header>
<app-content v-on:pass="deliverNum"></app-content>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var appHeader ={
template: '<div>header</div>',
props: ['propsdata']
}
var appContent ={
template: '<div>content<button v-on:click="passNum">pass</button></div>',
methods: {
passNum: function(){
this.$emit('pass', 10); //인자값: 10
}
}
}
new Vue ({
el: '#app',
components: {
'app-header': appHeader,
'app-content': appContent
},
data:{
num: 0
},
methods:{
deliverNum:function(value){
this.num = value;
}
}
});
</script>
</body>
|
cs |
◆ 관계없는 컴포넌트 간 통신방식(이벤트 버스)
- 지정한 2개의 컴포넌트 간에 데이터를 주고받는 방식
- 상위-하위 구조를 유지하지 않아도 데이터 간 직접 전달이 가능하다!!
Step1. 이벤트 버스를 위한 추가 인스턴스 생성
- 이벤트버스는 비어있는 Vue 인스턴스 객체를 의미
- 이벤트 버스는 데이터 전달자 역할을 하는 빈그릇일 뿐 event 사용과 동일
Step2. 이벤트를 보내는 컴포넌트
- 데이터를 주고자하는 컴포넌트에서 $emit을 사용하여 eventBus 객체에 값을 넣는다!
Step3. 이벤트를 받는 컴포넌트
- 데이터를 받는 컴포넌트에서는 $on()을 사용하여 이벤트를 받는다.
- 데이터를 받고자하는 컴포넌트에서 Vue인스턴스가 생성될 때(created)으로 미리 이벤트 핸들러 등록한 후, 데이터가 오면 methods에 정의한 변수로 전달
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<body>
<div id="app">
<child-component></child-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//1. 이벤트버스 생성(비어있는 Vue인스턴스)
//eventBus로 새로운 인스턴스 속성과 메소드에 접근 가능
var eventBus = new Vue();
Vue.component('child-component', {
template: '<div>하위 컴포넌트 영역<button v-on:click="showLog">show</button></div>',
//2. 이벤트를 보내는 컴포넌트($emit 사용)
methods: {
showLog: function(){
//eventBus.$emit('이벤트명', '데이터');
eventBus.$emit('triggerEventBus', 100)
}
}
})
var vm = new Vue({
el: '#app',
//3. 이벤트를 받는 컴포넌트($on 사용)
created: function(){
//eventBus.$on('이벤트명', function(데이터){...});
eventBus.$on('triggerEventBus', function(value){
console.log("이벤트를 전달받음. 전달받은 값 : ", value);
});
}
});
</script>
</body>
|
cs |
※ 이벤트버스를 사용하면, props 속성을 이용하지 않아 원하는 컴포넌트 간 데이터 전달이 편리하지만, 컴포넌트가 많아지면 어떤 컴포넌트에서 어느 컴포넌트로 보냈는지 관리에 어려움이 발생한다.
※ 이에 따라, 컴포넌트가 많아지면 컴포넌트 간의 통신을 관리하기 위해 상태관리 도구인 Vuex를 사용한다!!
※ Vuex란? 중, 대형 어플리케이션에서 컴포넌트 간의 데이터 관리를 효율적으로 하는 라이브러리이다!!
'Frontend > Vue' 카테고리의 다른 글
| [Vue] Vue 라우터 (0) | 2021.09.20 |
|---|---|
| [Vue] 컴포넌트 통신방식/데이터 전달방식(props / $emit) (0) | 2021.09.17 |
| [Vue] Vue 컴포넌트 (0) | 2021.09.16 |
| [Vue] Vue 인스턴스 (0) | 2021.09.15 |
| [Vue] Vue 프로젝트 구조 알아보기 (0) | 2021.09.13 |
