# 컴포넌트 통신
- 컴포넌트 구분했을 때, 관계가 형성됨
- 하위, 자식 컴포넌트
- 컴포넌트는 각각 데이터 유효 범위를 갖는다.
- 하위 ->이벤트 발생 ->상위
- 상위 ->Props 전달 ->하위
# 컴포넌트 통신 규약이 필요한 이유
- 기존 MVC 구조와 다르게, 항상 상위 컴포넌트에서 하위로는 Props 속성만 내려가고, 올라가는 것은 Event만 있으므로, 데이터 추적이 쉽다.
# props 속성
props.html
<body>
// 1. Root 용으로 사용할 엘리먼트 생성
<div id="app">
<!-- <app-header v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름"></app-header> -->
// 5. 지역 컴포넌트 사용
// 7. props 데이터이름 정의 및 매핑 : v-bind: props명="Root 인스턴스내 data 변수명"
<app-header v-bind:propsdata="message"></app-header>
<app-content v-bind:propsdata="num"></app-content>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var appHeader = {
// 8. {{ props변수명 }} 으로 뷰-데이터간 바인딩(부모 > 자식 : props 속성)
template: '<h1>{{ propsdata }}</h1>',
// 6. props명 정의
props: ['propsdata']
}
var appContent = {
template: '<div>{{ propsdata }}</div>',
props: ['propsdata']
}
// 2. Vue 인스턴스 생성
new Vue({
// 3. 매핑
el: '#app',
// 4-1. 지역 컴포넌트 정의
components: {
'app-header': appHeader,
'app-content': appContent
},
// 4-2. 인스턴트 내 사용되는 변수? 데이터 정의
data: {
message: 'hi',
num: 10
}
})
</script>
</body>
# event emit
event-emit.html
<body>
// 1. Root로 사용할 엘리먼트 정의
<div id="app">
<p>{{ num }}</p>
<!-- <app-header v-on:하위 컴포넌트에서 발생한 이벤트 이름="상위 컴포넌트의 메서드 이름"></app-header> -->
// 6. <app-header v-on:<하위 컴포넌트에서 발생한 이벤트 이름>="<상위 컴포넌트의 메서드 이름>"></app-header>
<app-header v-on:pass="logText"></app-header>
<app-content v-on:increase="increaseNumber"></app-content>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var appHeader = {
// 4. 지역 컴포넌트 템플릿 정의
// v-on:<이벤트명>="이벤트함수명" 형식으로 event-emit 정의
// 하위 컴포넌트 -> 상위 컴포넌트
// 해당
template: '<button v-on:click="passEvent">click me</button>',
methods: {
// 5. 이벤트 함수명 정의
passEvent: function() {
// this.$emit('<상위컴포넌트로 전달할 이벤트명>')
this.$emit('pass'); // 상위 컴포넌트로 pass라는 이벤트를 발생시킨다.
}
}
}
var appContent = {
template: '<button v-on:click="addNumber">add</button>',
methods: {
addNumber: function() {
this.$emit('increase'); // 싱위 컴포넌트로 increase라는 이벤트를 발생시킨다.
}
}
}
// 2. Vue 인스턴스 생성
var vm = new Vue({
// 3. Root 엘리먼트와 매핑
el: '#app',
// 4. 지역 컴포넌트 생성
components: {
'app-header': appHeader,
'app-content': appContent
},
// 인스턴스내 정의된 함수
methods: {
// 7. 상위 컴포넌트 메소드명
logText: function() {
console.log('hi');
},
increaseNumber: function() {
this.num = this.num + 1; // 여기서 this란 현재 인스턴스를 의미
}
},
// 인스턴스내 정의된 데이터 변수
data: {
num: 10
}
});
</script>
# vue 인스턴스 상에서 this
var obj = {
num: 10,
getNumber : function() {
console.log(this.num);
}
}
// this란 해당 object를 의미한다.
var Vue = {
data: {
num : 10
},
methods : {
함수명: function() {
this.num //data의 변수명에 바로 접근 가능
}
}
}
# 컴포넌트 통신 방법 -응용
'[DEV] App Dev ∕ Web Front > Framework ∕ Vue' 카테고리의 다른 글
| [vue.js] 뷰 라우터 (0) | 2020.12.02 |
|---|---|
| [vue.js] 컴포넌트 응용(같은 컴포넌트간 전달) (0) | 2020.12.02 |
| [vue.js] 컴포넌트 (0) | 2020.12.02 |
| [vue.js] 인스턴스 (0) | 2020.12.02 |
| [vue.js] 소개 (0) | 2020.12.01 |
최근댓글