[vue] prop 선언시 주의사항

프롭 선언 시 주의 사항)

# 문자열(String) "1"로 전달됨
<ChildComponent some-prop="1" />

# 숫자(Number) 1로 전달됨
<ChildComponent v-bind:some-prop="1" />
<ChildComponent :some-prop="1" />

출처 ) https://velog.io/@tobo/vue.js-Prop-사용방법

Props)
https://v3.ko.vuejs.org/guide/component-props.html#prop-타입

논리형)

<!-- 값이 없는 prop를 포함하면 `true`를 의미합니다. -->
<blog-post is-published></blog-post>

<!-- `false`는 정적이지만 Vue에게 이 값이 문자열이 아닌 -->
<!-- 자바스크립트 표현식임을 알리려면 v-bind가 필요합니다. -->
<blog-post :is-published="false"></blog-post>

<!-- 변수 값에 동적으로 할당합니다. -->
<blog-post :is-published="post.isPublished"></blog-post>

배열 전달)

<!-- 배열이 정적이지만 Vue에게 이 값이 문자열이 아닌 -->
<!-- 자바스크립트 표현식임을 알리려면 v-bind가 필요합니다. -->
<blog-post :comment-ids="[234, 266, 273]"></blog-post>

<!-- 변수 값에 동적으로 할당합니다. -->
<blog-post :comment-ids="post.commentIds"></blog-post>

객체 전달)

<!-- 객체가 정적이지만 Vue에게 이 값이 문자열이 아니라 -->
<!-- 자바스크립트 표현식임을 알리려면 v-bind가 필요합니다. -->
<blog-post
  :author="{
    name: 'Veronica',
    company: 'Veridian Dynamics'
  }"
></blog-post>

<!-- 변수 값에 동적으로 할당합니다. -->
<blog-post :author="post.author"></blog-post>