- 기존 js 프레임워크에서는 한 화면을 1개의 view로 간주했다
→ 한 화면의 데이터를 화면영역 어디서든 호출 가능
- vue.js는 컴포넌트의 유효범위(scope)가 독립적이다
→ 같은 웹 페이지라도 컴포넌트 간 데이터를 공유할 수 없다
→ 직접 참조는 불가
- props 속성
- 상위 → 하위 컴포넌트로 데이터를 전달할 때 사용하는 속성
- 다음과 같이, 하위 컴포넌트의 속성 안에 넣고 싶은 속성을 먼저 정의한다.Vue.component('child-component', { props: ['props 속성이름'], });-
그런 다음, 상위 컴포넌트의 HTML 코드에 등록된 child-component 태그에 v-bind 속성을 추가한다.
<child-component v-bind:props 속성 이름="상위 컴포넌트의 data 속성"></child-component> -
데이터 전달 예제
<div id="app> <child-component v-bind: props-속성-이름="상위-컴포넌트-데이터속성-이름"</child-compoonent> </div> <script> Vue.component('child-component', { props: ['props-속성-이름'], template: '<p>{{ props-속성-이름}} </p>', }); new Vue({ el: '#app', data: { message: "안녕 뷰"
-
유저가 왜 그랬을까