props

Vue.js에서 props는 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 속성을 의미합니다. props의 사용 이유는 기본적으로 뷰 컴포넌트가 각자 스코프를 가지기 때문에 다른 컴포넌트의 값을 바로 접근할 수 없기 때문입니다.

props 사용해보기

Vue 컴포넌트는 명시적인 props의 선언을 요구하고 있습니다. 자식 컴포넌트에서 props를 선언합니다.

<!--ChildComponent.vue-->
<template>
  <div>
    <h3>I like {{ str }}</h3>
  </div>
</template>

<script>
export default {
  name: 'child-component',
  props: {
    str : {
      type: String,
      default: 'default',
    },
  },
};
</script>
<!--style은 생략-->

str이 부모로부터 전달받는 props입니다. props는 이중 중괄호 문법을 통해 표현합니다. str은 인스턴스된 str속성의 값을 따르는데 이 속성은 <script>에서 정의합니다.

export default {
  name: 'child-component',
  props: {
    str : {
      type: String,
      default: 'default',
    },
  },
};

props를 객체 처럼 정의합니다. 이때 객체의 키가 props의 이름이 됩니다. 값은 해당 props의 타입이나 defualt값을 정의합니다.

위 컴포넌트에서 str은 String타입을 받으며 아무것도 전달받지 않는 경우 defualt의 값을 내보냅니다.

이제, props를 전달할 부모 컴포넌트를 하나 만들어보겠습니다.

<!--ParentComponent.vue-->
<template>
<div>
  <ChildComponent str='peach'/>
  <ChildComponent str='Vue.js'/>
  <ChildComponent/>
</div>
</template>

<script>
import ChildComponent from '@/components/ChildComponent.vue';

export default {
  name: 'parent-component',
  components: {
    ChildComponent
  },
};
</script>

template에서 자식 컴포넌트를 사용하고, props str로 값을 전달해줍니다.

App.vue에 부모 컴포넌트를 넣고 npm run serve로 수행하면 다음과 같은 결과가 나타납니다.
첫 번째와 두 번째 자식은 전달한 props가 적용되어 나타났고, 마지막은 아무것도 전달하지 않았으므로 기본값인 default 값이 적용되었음을 볼 수 있습니다.