Slots
-
[Composition API] Vue3 Slots 사용하기(script setup)Frontend/Vue3 2022. 12. 31. 21:57
1. 사용 배경 부모 컴포넌트 템플릿과 자식 컴포넌트 템플릿 사이 데이터(slot content) 통신 후 화면 랜더링을 원할 경우 사용합니다. 2. 파일 구조 프로젝트 파일 구조 독자분들의 이해를 돕기 위해 프로젝트 생성 시 자동으로 구성되는 프로젝트 구조를 그대로 사용하겠습니다. 3. 구현 과정 (App.vue와 main.js 파일은 전혀 손대지 않았습니다.) 1) 부모 컴포넌트 템플릿 -> 자식 컴포넌트 템플릿 방향으로 데이터를 전송하는 경우 우선 자식 컴포넌트인 HelloWorld.vue 파일입니다. //HelloWorld.vue 버튼 클릭 -> 부모 컴포넌트 HomeView.vue로 data 전송 //HomeView.vue {{ data }} 부모 컴포넌트 HomeView.vue -> 자식 컴포..