Props
-
[Composition API] Vue3 Props 사용하기(script setup)Frontend/Vue3 2022. 12. 25. 16:12
1. 사용 배경 Props는 상위 컴포넌트(부모)에서 하위 컴포넌트(자식)로 데이터를 넘겨줄 경우 사용합니다. 2. 파일 구조 독자분들의 이해를 돕기 위해 프로젝트 생성 시 자동으로 구성되는 프로젝트 구조를 그대로 사용하겠습니다. 3. 구현 과정 (App.vue와 main.js 파일은 전혀 손대지 않았습니다.) 부모 컴포넌트인 HomeView.vue 파일에서 자식 컴포넌트인 HelloWorld.vue 파일을 import 해서 사용하는 로직입니다. 여기서 msg에 들어가는 내용이 자식 컴포넌트인 HelloWorld.vue 파일로 전달됩니다. 자식 컴포넌트에서는 defineProps를 import 해주고 props라는 객체를 만들어 전달된 데이터를 받습니다. {{ props.msg }} 위와 같이 templ..