[Vue3] <slot>

Vue 에서 slot 은 외부에서 어떤 컴포넌트의 속성을 변경할 수 있게 해준다.

예를 들어

<template>
	<div>
        <div class="header">
          <p>제목</p>
        </div>
        <div class="content">
          <slot name="content"></slot>
        </div>
        <div class="footer">
          <p>끝</p>
        </div>
    </div>
</template>

이런 간단한 컴포넌트 A가 있다고 할 때

다른 컴포넌트에서

<template>
	<div>
    	<A>
        	<template v-slot:content>
            	<p>내용 바꾸기!</p>
            </template>
        </A>
    </div>
</template>

이런 식으로 A 컴포넌트의 content 부분에 들어갈 내용을 지정할 수 있다.

vue 에서 slot 을 사용하면 자식 컴포넌트의 특정 영역을 부모 컴포넌트에서 커스텀하거나 렌더링할 수 있다.