Vue.js Props

1 개요

Vue Props

Vue.js Props

• Vue.js에서 상위 컴포넌트가 하위 컴포넌트에 전달하는 속성(property)
• "properties"의 줄임말
• 하위 컴포넌트는 props를 통해 데이터를 전달받고 표시하거나 반응한다.
• Vue 컴포넌트는 외부로부터 데이터를 받을 수 있도록 `props`를 선언한다.
• 부모는 HTML 속성처럼 값을 전달하고, 자식은 `props` 선언부를 통해 이를 명시적으로 선언하여 사용한다.

---

• 단방향 바인딩: 부모 → 자식
  • props는 읽기 전용
  • 자식 컴포넌트가 props를 직접 수정하면 Vue가 경고를 표시한다.
  • 수정이 필요한 경우 `emit`을 통해 부모에게 알리고, 부모가 값을 갱신하는 방식으로 처리해야 한다.

2 예시

<!-- 부모 컴포넌트 -->
<ChildComponent title="Hello" :count="3" />

<!-- 자식 컴포넌트 (script setup 사용 ★) -->
<script setup>
const props = defineProps({
  title: String,
  count: Number
})
</script>

<!-- 자식 컴포넌트 (script setup 사용안함) -->
<script>
export default {
  props: ['title', 'count']
}
</script>

3 같이 보기

• Vus.js emit
• Vus.js emits
• Vus.js v-bind
• Vus.js v-model
• Vus.js 컴포넌트
• Vus.js defineProps
• Vus.js withDefaults
• Vus.js Composition API

4 참고

• https://vuejs.org/guide/components/props.html