101. Sidebar: Slot Properties

• vue cli start 링크

npm create vue@latest

---

• 프로젝트 링크

---

1. 사이드바 학습

   • 사이드바 학습은 필수적이지 않으며 언제든지 복습할 수 있음
   • 슬롯 프로퍼티에 대한 추가 정보 제공

2. 슬롯 프로퍼티 개념 소개

   • 다음 강의에서 만날 슬롯 프로퍼티에 대한 사전 설명
   • 별도의 프로젝트로 슬롯 프로퍼티 작업 진행

3. 프로젝트 설정

   • 제공된 zip 파일을 다운로드하고 패키지 설치 후 서버 시작
   • 기본 설정으로 생성된 프로젝트와 수정된 두 파일(App과 HelloWorld 컴포넌트) 사용

4. App 컴포넌트

   • HelloWorld 컴포넌트를 가져오고 등록
   • 탬플릿 블록에서 HelloWorld 컴포넌트에 슬롯 추가 예정

5. HelloWorld 컴포넌트

   • 스크립트 블록에 user 및 favorites 데이터 속성 정의
   • 슬롯을 추가하여 콘텐츠 삽입 가능하도록 변경 예정

---

1. 슬롯 프로퍼티 바인딩

   • HelloWorld 컴포넌트에 user 프로퍼티를 슬롯 컴포넌트에 바인딩
   • 부모 스코프인 App 컴포넌트에서 사용 가능하게 함

2. 동적 메시지 구현

   • App 컴포넌트에서 HelloWorld 컴포넌트의 사용자 정보를 활용하여 메시지 업데이트
   • v-slot 지시문 사용하여 user 데이터를 템플릿에 적용

3. 슬롯 프로퍼티의 새로운 문법

   • 버전 2.6 이상에서 사용 가능한 slot 지시문
   • 슬롯 프로퍼티 사용을 단순화하는 새로운 문법 제공

4. 추가 기능과 연습

   • HelloWorld 컴포넌트에서 favorites 데이터 프로퍼티를 슬롯에 바인딩하는 연습
   • App 컴포넌트에서 favorites 데이터 사용하여 메시지 업데이트

---

• Scoped Slots

App.vue

<script setup>
   import HelloWorld from "./components/HelloWorld.vue";
</script>

<template>
<div id="app">
   <HelloWorld #default="{ user, favorites }">
      <p>Hello {{ user.name }}. I like {{ favorites[0] }}</p>
   </HelloWorld>
</div>
</template>

HelloWorld.vue

<script setup>
   import {ref} from 'vue'
   
   const user = ref({
      name: 'John',
      age: 25,
   })
   
   const favorites = ref(['Pizza', 'Marbles', 'Birds'])
</script>

<template>
   <div>
      <slot :user="user" :favorites="favorites"></slot>
   </div>
</template>