Vue slot

vue의 slot은 부모 컴포넌트에서 자식 컴포넌트로 내용을 전달하는 데 사용된다.

slot 사용해보기

App.vue

<script setup>
import SlotItem from "./SlotItem.vue";
</script>

<template>
	<SlotItem>
    	<template v-slot:title>
        	<p>제목입니다.</p>
        </template>
        
        <!-- v-slot:icon을 #icon으로 축약할 수 있다. -->
    	<template #icon>
        	<p>😃</p>
        </template>
        
        <p>안녕하세요</p>
        
    	<template #content>
        	<p>내용입니다.</p>
        </template>
        
    	<template #default>
        	<p>default!!!</p>
        </template>
    </SlotItem>
</template>

SlotItem.vue

<template>
	<div>
    	<p>제목</p>
    	<slot name="title"></slot>
        
        <p>아이콘</p>
        <slot name="icon"></slot>

        <p>내용</p>
        <slot name="content"></slot>
        
        <p>default</p>
        <!--  slot에 name을 주지 않으면 
        	  부모 컴포넌트의 #default 값이 들어오게 된다. -->
        <slot></slot>
    </div>
</template>

부모 컴포넌트(App.vue)와 자식 컴포넌트(SlotItem.vue)에서 slot을 사용할때는 부모컴포넌트에서 자식컴포넌트 작성한 후 template 태그안에 작성해주어야한다.

템플릿 태그에 v-slot:원하는이름(#원하는이름)으로 자식 컴포넌트 slot의 name과 같은 위치에 부모컴포넌트에서 작성된 HTML을 전달할 수 있다.

v-slot:default(#default)를 사용하면 slot에 name이 없는 위치로 부모컴포넌트의 HTML이 전달된다.

위와 같이 작성했다면 아래와 같은 HTML이 랜더링된다.

<template>
	<div>
    	<p>제목</p>
		<p>제목입니다.</p>
        
        <p>아이콘</p>
		<p>😃</p>
        
        <p>안녕하세요</p>

        <p>내용</p>
        <p>내용입니다.</p>
        
        <p>default</p>
		<p>default!!!</p>
    </div>
</template>

slot 동적값 전달하기

SlotItem.vue

<script setup>
const msg = '반갑습니다.';
<script>

<template>
	<div>
        <slot name="hello" :msg="msg"></slot>
    </div>
</template>

App.vue

<template>
	<SlotItem>
    	<!-- props를 받는다.
        ('props'가 아닌 다른 이름으로 받을 수 있다.) -->
    	<template #hello="props">
        	<p>안녕하세요! {{ props.msg }}</p>
        </template>

		<!-- 아래와 같이 구조분해할당을 사용할 수 있다. -->
    	<template #hello="{ msg }">
        	<p>안녕하세요! {{ msg }}</p>
        </template>
    </SlotItem>
</template>

위와 같이 작성하면 아래와 같은 HTML이 랜더링된다.

<template>
	<p>안녕하세요! 반갑습니다.</p>
</template>