728x90
모든 예제 코드는 github에 있습니다.
5. 컴포넌트 통신 방법 - 응용
같은 컴포넌트 레벨 간의 통신 방법
- AppHeader → Appcontent
- 위 그림에서 보듯이 데이터를 전송할 길이 없다. 따라서 관계되어 있는 길을 찾아서 구현해야 한다.
같은 컴포넌트 레벨 간의 통신 방법 구현
- AppContent → Root → AppHeader
- 즉, AppContent가 event로 Root에 데이터를 건네주고, Root가 props로 AppHeader로 데이터를 넘겨줘야 한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>component same level</title>
</head>
<body>
<div id="app">
<app-header v-bind:num="num"></app-header>
<app-content v-on:pass-num="sandNum"></app-content>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const appHeader = {
template: "<div>Header<p>{{num}}</p></div>",
props: ["num"],
};
const appContent = {
template: '<div><button v-on:click="passNum">pass</button></div>',
methods: {
passNum: function () {
this.$emit("pass-num", 10);
},
},
};
const vm = new Vue({
el: "#app",
components: {
"app-header": appHeader,
"app-content": appContent,
},
data: {
num: 0,
},
methods: {
sandNum: function (num) {
this.num = num;
},
},
});
</script>
</html>Ï728x90
728x90
'Lecture > [인프런] Vue.js 시작하기 - Age of Vue.js' 카테고리의 다른 글
| 7. HTTP 통신 라이브러리 - axios (0) | 2020.07.05 |
|---|---|
| 6. 라우터 (0) | 2020.07.05 |
| 4. 컴포넌트 통신 방법 - 기본 (0) | 2020.07.05 |
| 3. 컴포넌트 (0) | 2020.07.05 |
| 2. 인스턴스 (0) | 2020.07.05 |
