TIL-65, (Vue) Props

Vue에서 컴포넌트에 Props를 전달하는 방식은

React의 그것과는 방식이 다르다.

어떻게 다른지, 어떻게 Props를 전달할 수 있는지 알아보자.

부모컴포넌트

<template>
  // 1.
  <컴포넌트 :props명="데이터" />
  // 2.
  <컴포넌트 v-bind:props명="데이터" />
</template>

부모 컴포넌트에서는 위와 같이

컴포넌트 속성에 두가지 방법으로 전달할 수 있다.

자식컴포넌트

<template>
  <div></div>
</template>

<script>
  export default {
    // 1.
    props: {
		  props명: props 타입(String, Number, ...)
  },
    // 2.
    props: ["props명"],
</script>

자식컴포넌트에서는 script에서 props를 명시해준다.

객체로, 배열로도 받을 수 있다.

객체로 받을 때는 props의 타입을 명시해준다.