[Vue.js] 컴포넌트 데이터 바인딩 이해하기 - props, v-bind

dhkim 7월 25, 2022


 

이번 포스팅은 Vue.js 의 Vue Template에서 렌더링 될 때,

Vue 인스턴스의 데이터와 연결하는 것 (데이터 바인딩)에 대해 알아봅니다.



1. "data" 속성

 먼저, 상위 컴포넌트인 '뷰 인스턴스'에서 하위 컴포넌트 ('appHeader', 'appContent')에 전달할 정보를 "data" 속성에 정의합니다. 

 "data" 속성의 값은 key-value 형태로 입력(①) 합니다.

이 값은 하위 컴포넌트의 "props" 속성을 통해 전달받습니다. (②)

 "prop" 속성의 값은 prop : ['props 속성 명칭']

[data 속성 입력]


2. 상위 컴포넌트의 데이터 바인딩 ( v-bind:propsdata )

 앞서 정의한 propdata의 명칭 (②)으로 컴포넌트에 바인딩 합니다. (③)

v-bind: props 속성명칭 = "상위 컴포넌트 data의 키값"



[propsdata 바인딩]


 지정한 값이 하위 컴포넌트('appHeader', 'appContent')의 template 속성에 정의한 포맷대로 바인딩 됩니다. (④)

[상위 컴포넌트의 data 속성값 반영]



3. 요약



4. Test Source

[HTML]

1
2
3
4
5
<div id="app">
	<h2>Binding Exercise</h2>
	<app-header v-bind:h_propsdata="message"></app-header>
	<app-content v-bind:c_propsdata="num"></app-content>
</div>


[JavaScript]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
let appHeader = {
    template : '<h1>Header : {{ h_propsdata }}</h1>',
    props : ['h_propsdata']
}

let appContent = {
    template : '<div>Content : {{ c_propsdata }}</div>',
    props: ['c_propsdata']
}


new Vue({
    el: '#app',

    // 지역 컴포넌트 등록 방식
    components: {
      // '컴포넌트 이름' : 컴포넌트 내용
      'app-header': appHeader,
      'app-content': appContent
    },

    data: {
      message: 'Message ...',
      num: 10
    }
})

0 댓글