Vue.js - props

1. 부모 컴포넌트에 정의된 데이터를 사용하려면?

Vue에서 자식 컴포넌트는 부모 컴포넌트에서 정의된 데이터에 직접 접근할 수 없으므로 부모 컴포넌트는 자식 컴포넌트에 데이터를 전달하기 위해 props를 사용한다.

2. props

<template>
  <div>
    <h2>{{ title }}</h2>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    title: String,
    content: String
  }
}
</script>

<template>
  <div>
    <ChildComponent title="제목" content="내용" />
  </div>
</template>

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

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  }
}
</script>

• 위와 같이 자식 컴포넌트에서 props를 정의하면 부모 컴포넌트에서 데이터를 전달 할 수 있다.

• props는 단방향 데이터 바인딩이므로 부모 -> 자식에게 데이터를 전달할 수 있어도 그 반대로는 별도의 이벤트가 필요하다.
• props의 이름은 camelCase나 PascalCase가 아닌, kebab-case(하이픈 구분자)를 사용한다.