[Vue.js] tutorial - 14. Slots

📍Slots

- <slot> 엘리먼트를 사용하여 부모 컴포넌트에서 자식 컴포넌트로 <template> 블럭을 전달할 수 있다

- 자식 컴포넌트

<!-- ChildComp.vue -->
<template>
  <!-- <slot /> 이렇게만 해도 되고 아래는 fallback contents 전달하고 싶을 때 -->
  <slot>Fallback content</slot>
</template>

 

- 부모 컴포넌트 (before)

<!-- App.vue -->
<ChildComp>
  <!-- 여기에 자식 컴포넌트에 전달할 내용을 작성 -->
  This is some slot content!
</ChildComp>

 

- <slot> 내부의 내용은 fallback contents로 작동하여 부모 컴포넌트에서 <slot> contents를 입력하지 않았을 때 출력된다

- 부모 컴포넌트 (after)

<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'

const msg = ref('from parent')
</script>

<template>
  <ChildComp>
    <h2>Message: {{ msg }}</h2>
  </ChildComp>
</template>