vue.js__props 속성

🌱 vue에서의 props 속성 알아보기

🔸 중요 🔸

• 상위(부모)컴포넌트에서 하위(자식)컴포넌트로 보내줌.
  ( emit(하위에서 상위로 보냄)의 반대개념 )
• (HTML 어트리뷰트는 대소문자 구분이 없기 때문에 브라우저는 대문자를 소문자로 변경하여 읽는다. 그렇기 때문에 카멜 케이스(대소문자 혼용)로 prop의 이름을 정한 경우에 DOM 템플릿 안에서는 케밥 케이스(하이픈으로-연결된-구조)를 사용하여야 올바르게 동작한다.)
• 모든 타입의 변수를 props 할 수 있다.

props 속성 작성 방법)
<!-- HTML에서의 kebab-case -->
<template>
	<child-component post-title="hello!"></child-component>
</template>
...
<script>
  Vue.component('child-component', {
      //----- JavaScript에서의 camelCase
    props: ['postTitle(props속성 이름)'],
    template: '<h3>{{ postTitle }}</h3>'
  })
</script>

props 속성 작성 예시)

<template>
   <div id='test'> ----- id.test로 연결해준 👉 상위 컴포넌트 부분!!
      <child-component :peopleData='name'> 
     	   상위로부터 props 받은 하위 컴포넌트 부분
      </child-component>
   </div>
</template>
<script>
   Vue.component('child-component',{
   	 props: ['peopleData'],
     template: '<p>{{peopleData}}</p>'
   })
</script>