AppHeader와 AppContent 같이 같은 컴포넌트 레벨 간의 통신 방법에 대해 알아보겠습니다.
(1)의 그림과 같이 AppContent에서 AppHeader로 데이터 10을 넘겨주는 방법은 다음과 같다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>',
// (3)root로 부터 10을 받는다
props: ['propsdata']
}
var appContent = {
template: '<div>content<button v-on:click="passNum">pass</button></div>',
methods: {
passNum: function(){
// (1)event를 통해 root로 10을 넘겨준다
this.$emit('pass', 10);
}
}
}
new Vue({
el: '#app',
components: {
'app-header': appHeader,
'app-content': appContent
},
data :{
num: 0
},
methods: {
// (2)appContent로 부터 10을 받는다
deliverNum: function(value){
this.num = value;
console.log(this.num);
}
}
})
</script>
</body>
</html>www.inflearn.com/course/Age-of-Vuejs/
Vue.js 시작하기 - Age of Vue.js - 인프런
Vue.js로 쉽게 웹 개발할 수 있도록 기본 개념과 핵심 기능에 대해서 학습하고 구현해봅니다. 강좌를 들으시고 나면 Vue.js로 프런트엔드 개발을 하시는게 재밌어질거에요. 초급 웹 개발 프레임워
www.inflearn.com
joshua1988.github.io/vue-camp/
Cracking Vue.js
joshua1988.github.io
위 강좌를 통해 배운 내용을 정리했습니다.
'Study > Vue' 카테고리의 다른 글
| [Vue] HTTP 통신 라이브러리 - Axios 엑시오스 (0) | 2020.12.06 |
|---|---|
| [Vue] 뷰 라우터(router) (0) | 2020.12.06 |
| [Vue] 컴포넌트 통신 방식 Props, Event emit (0) | 2020.12.05 |
| [Vue] 컴포넌트 Component (0) | 2020.12.02 |
| [Vue] MVVM 패턴 & Reactivity (0) | 2020.12.01 |
댓글