같은 컴포넌트 레벨 간 통신
같은 컴포넌트 레벨 간 데이터를 전달하기 위해서는 상위 컴포넌트를 통해야한다.
아래 그림과 같이 appContent라는 하위 컴포넌트에서 appHeader라는 하위 컴포넌트로 데이터를 전달하려면 appContent에서 Root로 Event를 발생시키고 Root에서 Props 속성을 내려주는 방식으로 구현하면 된다.
예시
appContent에서 Event로 10을 전달해주면 Root의 num 속성에 세팅하고, 이를 propsdata라는 Props 속성으로 appHeader에 데이터를 전달해주었다.
<!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>
<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);
}
}
}
new Vue({
el: '#app',
components: {
'app-header': appHeader,
'app-content': appContent
},
data: {
num: 0
},
methods: {
deliverNum: function(value) {
this.num = value;
}
}
});
</script>
</body>
</html>
'개발 > Vue.js' 카테고리의 다른 글
| [Vue.js] 뷰 라우터 (0) | 2023.02.08 |
|---|---|
| [Vue.js] 컴포넌트 통신 방식(Props, Event) (0) | 2022.12.19 |
| [Vue.js] Vue, 뷰 인스턴스, 뷰 컴포넌트 (0) | 2022.12.18 |
| [Vue.js] 시작하기 - 프로그램 설치 (0) | 2022.12.18 |