Vue 컴포넌트 데이터 전달: 부모 -> 자식

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

Vue.js 기초 지식을 갖춘 웹 개발자

난이도: 중급 (컴포넌트 간 데이터 흐름 이해 필요)

핵심 요약

• props는 부모에서 자식 컴포넌트로 데이터를 전달하는 정식 방법
• 자식 컴포넌트에서 defineProps()로 props를 선언
• 부모 컴포넌트에서 :prop명으로 JavaScript 변수를 바인딩

섹션별 세부 요약

1. 자식 컴포넌트에서 props 정의

• defineProps() 함수로 props를 정의
• defineProps({ message: String, userAge: { type: Number, required: true } })
• type으로 데이터 형식 지정, required로 필수 여부 명시