컴포넌트 간 통신과 유효 범위
뷰의 경우 컴포넌트로 화면을 구성하므로 같은 웹 페이지라도 데이터를 공유할 수 없다.
컴포넌트 자체적으로 고유한 유효 범위를 갖기 때문이다. 이는 뷰 프레임워크 내부적으로 정의된 특징이다.
각 컴포넌트의 유효 범위가 독립적이기 때문이다.
컴포넌트 유효 범위 증명 코드
<!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">
<my-component1></my-component1>
<my-component2></my-component2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
// 첫번째 컴포넌트
var cmp1 = {
template: '<div>첫 번째 지역 컴포넌트 : {{cmp1Data}}</div>',
data: function(){
return{
cmp1Data: 100
}
}
};
// 두번째 컴포넌트
var cmp2 = {
template: '<div>두 번째 지역 컴포넌트 : {{cmp2Data}}</div>',
data: function(){
return{
cmp2Data: cmp1.data.cmp1Data
}
}
};
new Vue({
el: '#app',
// 지역 컴포넌트 등록
components: {
'my-component1' : cmp1,
'my-component2' : cmp2,
}
})
</script>
</body>
</html>
상 하위 컴포넌트 관계
기본적인 데이터 전달 방법은 상하위 컴포넌트 간의 데이터 전달 방법이다.
상위-하위 컴포넌트란 트리 구조에서 부모 노드, 자식 노드처럼 컴포넌트 간의 관계가 부모.자식으로 이루어진 컴포넌트를 의미한다.
상위에서 하위 컴포넌트로 데이터 전달하기
props속성
props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용하는 속성이다.
상위 컴포넌트의 HTML코드에 등록된 child-component컴포넌트 태그에 v-bind속성을 추가한다.
<child-component v-bind:props 속성 이름="상위 컴포넌트의 data속성"></child-component>
v-bind 속성의 왼쪽 값으로 하위 컴포넌트에서 정의한 props속성을 넣고, 오른쪽 값으로 하위 컴포넌트에 전달할 상위 컴포넌트의 data속성을 지정
props 속성을 사용한 데이터 전달 예제
<!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">
<child-component v-bind:propsdata="message"></child-component>
<!-- propsdata : props속성 이름 -->
<!-- message : 상위 컴포넌트의 데이터 속성 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
Vue.component('child-component', {
props: ['propsdata'],
template: '<p>{{propsdata}}</p>',
})
new Vue({
el: '#app',
// 지역 컴포넌트 등록
data: {
message: 'Hello Vue! passed from Parent Component'
}
})
</script>
</body>
</html>
컴포넌트 간의 관계
child-component를 전역으로 등록한 것 이외에 딱히 상위 컴포넌트를 지정하지 않는다.
뷰 인스턴스 안에 마치 상위 컴포넌트가 존재하는 것처럼 하위 컴포넌트로 props를 내려보냈습니다. 그 이유는
컴포넌트를 등록함과 동시에 뷰 인스턴스 자체가 상위 컴포넌트가 되기 때문이다.
인스턴스에 새로운 컴포넌트를 등록하면 기존에 있는 컴포넌트는 상위 컴포넌트가 되고 새로 등록된 컴포넌트는 하위 컴포넌트가 된다.
'JS 프레임워크 > Vue' 카테고리의 다른 글
| [Vue] Vue 라우트 (0) | 2021.04.06 |
|---|---|
| 뷰 컴포넌트 (0) | 2021.03.31 |
| Vue 인스턴스 (0) | 2021.03.31 |
| Vue 환경설정 및 Hello world (0) | 2021.03.30 |
| Vue JS란 (0) | 2021.03.30 |
