[Vue.js] Props

 

🚀 Props

    🔽 Props로 Data 전달

모든 Component Instance는 자체 격리된 범위가 있는 것이에요. 즉, 하위 컴포넌터의 템플릿에서 상위 데이터를 직접 참조 할 수 없으며, 그렇게 해서는 안 되는 것이에요. JAVA로 비유하자면 다형성과 같은 것인 거 같아요.

Data는 `props` Option을 이용하여 하위 컴포넌트로 전달 될 수 있는 것이에요.

prop은 상위 컴포넌트의 정보를 전달하기 위한 사용자 지정 특성인 것이에요. 하위 컴포넌트는 `props` option을 이용하여 수신할 것으로 기대되는 Props를 명시적 선언해야 하는 것이에요.

 

예시 코드

Vue.component('child', {
  // props 정의
  props: ['message'],
  // 데이터와 마찬가지로 prop은 템플릿 내부에서 사용할 수 있으며
  // vm의 this.message로 사용할 수 있습니다.
  template: '<span>{{ message }}</span>'
})

 

위와 같이 정의하고, 문자열을 다음과 같이 전달할 수 있는 것이에요.

 

<child message="안녕하세요!"></child>

 

출력 결과

안녕하세요!

 

 

 

 

    🔽 동적 Props

정규 속성을 표현식에 Binding하는 것과 비슷하게, v-bind를 이용하여 부모의 Data에 props를 동적으로 바인딩 할 수 있는 것이에요. Data가 상위에서 Update(최신화) 될 때 마다 하위 Data로도 전달 되는 것이랍니다.

<div>
  <input v-model="parentMsg">
  <br>
  <child v-bind:my-message="parentMsg"></child>
</div>

반응형

 

`V-bind`에 대한 단축 구문을 사용하면 더 편리한 것이에요.

<child :my-message="parentMsg"></child>

 

출력 결과

출처 : https://kr.vuejs.org/v2/guide/components.html

 

객체의 모든 속성을 props로 전달하려면 인자없이 `v-bind`를 쓸 수 있는 것이에요. (v-bind:prop-name 대신 v-bind) 예를 들어 아래와 같이 있다고 가정한다면

todo: {
  text: 'Learn Vue',
  isComplete: false
}

 

그런 다음

<todo-item v-bind="todo"></todo-item>

 

이것은 다음과 같은 동작을 하는 것이에요.

<todo-item
  v-bind:text="todo.text"
  v-bind:is-complete="todo.isComplete"
></todo-item>

 

참고로 v-bind:{props 이름} 에서 v-bind는 생략 가능한 것이에요.