[Vue 3] 컴포넌트 props

      <BlogPost post-title="글 제목" desc="설명 설명" />
    

      export default {
  props: ['postTitle', 'desc']
}
    

      export default {
	props: {
		postTitle: {
			type: String, // 문자열로 제한
			required: true // 필수로 넣어야함
		},
		desc: {
			type: String, // 문자열로 제한
			default: "" // 기본값 ""
		},
	}
}
    

      <BlogPost post-title="글 제목" desc="설명 설명" />
    

      <template>
	<BlogPost :post-title="title" :desc="desc" />
</template>

<script>
export default {
	data() {
		return {
			title: "글 제목",
			desc: "설명 설명"
		};
	}
}
</script>
    

      <template>
	<BlogPost 
		v-for="post of posts"
		:post-title="post.title" 
		:desc="post.desc"
		:key="post.title"
		/>
</template>

<script>
export default {
	data() {
		return {
			posts: [
				{
					title: "햄이네 박사라네",
					desc: "아이네의 모시꺵이 같은 겁니다."
				},
				// ...
			]
		};
	}
}
</script>
    

      <template>
	<div class="post">
		<h1> {{ postTitle }} </h1>
		<p> {{ desc }} </p>
	</div>
</template>
    

      export default {
  props: ["postTitle", "desc"],
  mounted() {
		// ❌ props 값은 새로 쓸 수 없음!
    this.postTitle += "글쓴이 : vuelogger";
  },
};
    

      export default {
  props: ['initialCounter'],
  data() {
    return {
      counter: this.initialCounter
    }
  }
}
    

      export default {
  props: ['size'],
  computed: {
    // size 값이 바뀔 때마다 업데이트 됩니다.
    normalizedSize() {
      return this.size.trim().toLowerCase()
    }
  }
}
    

      <template>
	<!-- 이 버튼을 누르면 나이가 점점 늘어나요!! -->
  <button @click="user.age++">{{ user.age }}</button>
</template>

<script>
export default {
  props: ["user"],
};
</script>
    

      export default {
  props: {
    // 타입 제한
    propA: Number,
		// 여러개 타입 제한
    propB: [String, Number],
		// type 키로 타입 제한
    // 필수로 넣어줘야함을 명시
    propC: {
			type: String,
      required: true // 기본적으로는 모든 prop은 선택사항
    },
    // 기본값 (default)
		// 외부에서 값을 정해주지 않은 경우나 undefined인 경우
		// default에 명시한 값을 사용
    propD: {
      type: Number,
      default: 100 // 기본값이 없는 경우 undefined
									 // Boolean의 경우 false
    },
    // 객체나 배열 타입의 경우는 함수를 통해 반환해야함
    propE: {
      type: Object,
			// default 함수에서 매개변수로 들어온 값을 가져올 수 있음
      default(rawProps) {
        return { message: 'hello' }
      }
    },
		// 함수 타입인 경우 default에 넣어준 함수가 곧 default 함수가 됨
    propG: {
      type: Function,
      // Default function이라는 글자를 반환하는 함수가 디폴트가 됨
      default() {
        return 'Default function'
      }
    }
    // 커스텀으로 제한
    propF: {
      validator(value) {
        return ['success', 'warning', 'danger'].includes(value)
      }
    },
  }
}
    

      class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName
    this.lastName = lastName
  }
}
    

      export default {
  props: {
    author: Person
  }
}
    

      export default {
  props: {
    disabled: Boolean
  }
}
    

      <!-- :disabled="true" 와 동일 -->
<MyComponent disabled />

<!-- :disabled="false" 와 동일 -->
<MyComponent />