Props01

Props로 데이터 전달하기

모든 컴포넌트 인스턴스에는 자체 격리 된 범위가 있음

즉, 하위 컴포넌트의 템플릿에서 상위 데이터를 직접 참조 할 수 없으며 그렇게 해서는 안됨

데이터는 props 옵션 을 사용하여 하위 컴포넌트로 전달 될 수 있음

prop는 상위 컴포넌트의 정보를 전달하기위한 사용자 지정 특성임

하위 컴포넌트는 props 옵션을 사용하여 수신 할 것으로 기대되는 props를 명시적으로 선언해야함

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

그런 다음 일반 문자열을 다음과 같이 전달할 수 있음

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

안녕하세요!

 

---

camelCase vs. kebab-case

HTML 속성은 대소 문자를 구분하지 않으므로 문자열이 아닌 템플릿을 사용할 때 camelCased prop 이름에 해당하는 kebab-case(하이픈 구분)를 사용해야 함

 

Vue.component('child', {
  // JavaScript는 camelCase
  props: ['myMessage'],
  template: '<span>{{ myMessage }}</span>'
})

 

<!-- HTML는 kebab-case -->
<child my-message="안녕하세요!"></child>

문자열 템플릿을 사용하는 경우에는 이 제한이 적용되지 않음