상위 컴포넌트는 하위 컴포넌트로 props를 전달하고,
하위 컴포넌트에서는 상위 컴포넌트로 이벤트를 올려주는 방식으로 컴포넌트간 통신을 하게 된다.
그럼, 동일 레벨 간 통신을 어떻게 할까 ?
동일 레벨 간 컴포넌트는 두 컴포넌트가 직접 통신하는것이 아니고
하위 컴포넌트에서 상위컴포넌트로 이벤트를 발생시키고, 하위 컴포넌트로 props를 전달하는 방식으로 통신한다.
위 그림 기준으로
<AppHeader> -> (이벤트발생) -> <Root> -> (props전달) -> <AppContent>
으로 Root를 거쳐서 통신을 하게 된다.
아래 코드를 실행 후 pass 버튼을 클릭해보자.
|
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
41
42
43
44
45
46
47
48
49
50
|
<!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>
<div id="app">
<app-header v-bind:propsdata="num"></app-header> <!-- 4.상위 컴포넌트의 num 데이터값을 바인딩함. -->
<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'] // 3.props 정의
}
var appContent = {
template: '<div>content<button v-on:click="passNum">pass</button></div>',
methods: {
passNum: function() {
// 1.위에서 passNum 으로 정의한 버튼 클릭 시 pass 이벤트 정의
this.$emit('pass', 10);
}
}
}
new Vue({
el: '#app',
components: {
'app-header': appHeader,
'app-content' : appContent
},
data: {
num: 0
},
methods: {
// 2.이벤트 발생된 값이 value로 들어오게 됨, 현재 여기엔 10이라는 값이 들어옴.
deliverNum: function(value) {
this.num = value;
}
}
})
</script>
</body>
</html>
|
cs |
버튼 클릭(appContent에서 이벤트 발생)한 결과 Root의 data인 num의 값이 10으로 변경되고,
appHeader의 props로 Root의 data 값(10)이 바인딩 된 결과를 확인할 수 있다.
'언어 > Vue.js' 카테고리의 다른 글
| [Vue.js] 카카오 로그인처리 (0) | 2022.02.01 |
|---|
