뷰 컴포넌트는 각각 고유한 데이터 유효범위를 갖는다.
공유하려면 props속성과, 이벤트 전달 방식을 사용 해야 함.
- 상위는 하위로 데이터를 내려줌 : 프롭스 발생 (props = data)
- 하위에서 상위로는 이벤트를 올려줌 : 이벤트 발생
컴포넌트 통신 규칙
: 데이터의 흐름을 추적할 수 있다
<props 속성>
props 설정
<app-header v-bind:props 속성 이름="상위 컴포넌트의 데이터 이름"></app-header>
<body>
<div id="app">
<app-header v-bind:propsdata="message"></app-header>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var appHeader = {
template:'<h1>header</h1>',
props:['propsdata'] //props속성이름
}
new Vue({
el:'#app',
components:{
'app-header': appHeader
},
data:{
message:'hi' //상위 컴포넌트의 데이터 이름
}
})
</script>
</body>
특징
- reactivity 가 props에도 반영된다 : root data가 바뀌면 하위 데이터도 바뀐다
- v-bind를 이용하여 root에서 내용을 아래로 내려주고, 값이 바로 화면에서 바뀐다
<body>
<div id="app">
<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 = {
template:'<h1>{{ propsdata }}</h1>',
props:['propsdata']
}
var appContent = {
template:'<div>{{ propsdata }}</div>',
props:['propsdata']
}
new Vue({
el:'#app',
components:{
'app-header': appHeader,
'app-content' : appContent
},
data:{
message:'hi',
num:10
}
})
</script>
</body>
'vue.js' 카테고리의 다른 글
| 뷰 인스턴스에서의 this (0) | 2023.01.11 |
|---|---|
| 컴포넌트 통신 - event emit (0) | 2023.01.11 |
| 컴포넌트 (0) | 2023.01.10 |
| 뷰 인스턴스 (0) | 2023.01.10 |
| Reactivity (0) | 2023.01.10 |
