오늘은 Vue.JS step 7. props 데이터 전달(부모 -> 자식)에 대해 포스팅하려고 합니다.
Vue.JS에서는 상위(부모) 컴포넌트에서 선언한 data의 값을 하위(자식) 컴포넌트에서 사용하고자 할 때
단순하게 bind를 하거나 Mustache(이중 중괄호)를 사용하여 data를 이용할 수 없습니다.
위 문제를 해결하기 위해 props라는 속성을 이용합니다.
props란 상위(부모) 컴포넌트에서 하위(자식) 컴포넌트로 데이터를 전달할 때 사용되는 전달 방식입니다.
v-bind를 사용하여 상위(부모) 컴포넌트의 데이터를 동적으로 바인딩할 수 있습니다.
아래 예제 소스코드를 통해 알아보도록 하겠습니다.
props.html을 만들고, 기본 html에서 vue를 활용해 보겠습니다.
<!-- props.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.header{
background-color: green;
color:white;
}
.content{
background-color: blueviolet;
color:white;
}
</style>
<div id="app">
<!-- <[컴포넌트 이름] v-bind:[props 속성 이름] = "[상위 컴포넌트의 데이터 이름]"></[컴포넌트 이름]> -->
<app-header v-bind:propsmessage="message"></app-header>
<app-content v-bind:propsnum="num"></app-content>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var appHeader = {
template : '<div class="header">header <p>{{propsmessage}}</p></div>',
props:['propsmessage']
}
var appContent = {
template : '<div class="content">content <p>{{propsnum}}</p></div>',
props:['propsnum']
}
new Vue({
el:'#app',
data:{
message: 'bono915.tistory.com 환영합니다.',
num:10
},
components:{
'app-header':appHeader,
'app-content':appContent
}
})
</script>
</body>
</html>
위 예제 소스에서 vue인스턴스를 생성하였고, app-header와
app-content를 하위(자식) 컴포넌트로 선언하였습니다.
개발자 도구(F12)에서 vue 탭을 보면, 컴포넌트의 구성에 대해 다음과 같이 확인이 가능합니다.
생성한 인스턴스는 Root 컴포넌트가 되며, 하위(자식) 컴포넌트에
2개의 컴포넌트가 생성된 것을 확인할 수 있습니다.
그리고 각각의 컴포넌트에 props:['props변수'] 선언하고
인스턴스 html영역 안에서 v-bind:[props변수 = data변수]로 선언하여
상위(부모) 컴포넌트에서 선언한 data(message, num)의 값을 하위(자식) 컴포넌트에 바인딩하여
바인딩된 부모의 data(message, num)을 사용할 수 있습니다.
<div id="app">
<app-header v-bind:propsmessage="message"></app-header>
<app-content v-bind:propsnum="num"></app-content>
</div>
props에 바인딩된 propsmessage와 propsnum을 각각의 component에서
Mustache(이중 중괄호)를 사용하여 html 화면에 출력하였습니다.
var appHeader = {
template : '<div class="header">header <p>{{propsmessage}}</p></div>',
props:['propsmessage']
}
...
...
var appContent = {
template : '<div class="content">content <p>{{propsnum}}</p></div>',
props:['propsnum']
}
Visual Studio Code에서 props.html를 마우스 우클릭 후 "Open with Live Server"
또는 키보드로 Alt +L + O 실행하면 다음과 같은 브라우저에 결과물이 나타납니다.
app-header컴포넌트는 초록색으로 app-content컴포넌트는 보라색으로 표현하였는데,
상위(부모) 컴포넌트에서 하위(자식) 컴포넌트로 바인딩되어 출력된 html 화면과
vue 탭에서 바인딩된 props 값을 다음 그림에서 함께 확인하실 수 있습니다.
지금까지 Vue.JS step 7. props 데이터 전달(부모 -> 자식)에 대한 포스팅이었습니다.
'Develope > Vue.JS' 카테고리의 다른 글
| [Vue.JS] step 8. event-emit 데이터 전달(자식 ->부모) (0) | 2022.05.18 |
|---|---|
| [Vue.JS] 보간법 디렉티브(Directive) v-bind, v-on 약어 (0) | 2022.05.17 |
| [Vue.JS] step 6. watch vs computed 비교 (0) | 2022.05.11 |
| [Vue.JS] step 5. 메서드(methods) (0) | 2022.05.10 |
| [Vue.JS] step 4. 데이터 바인딩(data binding) (0) | 2022.05.04 |
