Vue.js) 컴포넌트 - Slot

1. Slot

Vue.js의 slot은 부모 컴포넌트에서 자식 컴포넌트로 콘텐츠를 전달할 때 사용되는 강력한 기능ㅎ입니다. slot을 사용하면 부모 컴포넌트가 자식 컴포넌트의 특정 위치에 자신의 콘텐츠를 삽입할 수 있습니다.

 

2. slot 기본값 설정

// App.vue
<template>
	<MyBtn/>
	<MyBtn>
	</MyBtn>
</template>

<script>
import MyBtn from './components/MyBtn.vue';
export default {
	components: {
		MyBtn,
	},
};
</script>

// MyBtn.vue
<template>
	<div class="btn">
		<slot>Apple</slot>
	</div>
</template>

<style scoped lang="scss">
.btn {
	display: inline-block;
	margin: 4px;
	padding: 6px 12px;
	border-radius: 4px;
	background-color: gray;
	color: white;
	cursor: pointer;
}
</style>

Apple

Banana

slot 기본 값은 위와 같이 slot 태그 안에 명시해 주면 됩니다. 자식 컴포넌트를 호출할 때 slot안에 들어갈 내용을 명시하면 해당 내용으로 적용됨을 알 수 있습니다.

 

3. slot 구분하여 명시

// App.vue
<template>
	<MyBtn>
		<template #icon><span>(B)</span></template>
		<template #text><span>Banana</span></template>
	</MyBtn>
</template>

<script>
import MyBtn from './components/MyBtn.vue';
export default {
	components: {
		MyBtn,
	},
};
</script>

// MyBtn.vue
<template>
	<div class="btn">
		<slot name="icon"></slot>
		<slot name="text"></slot>
	</div>
</template>

<script>
export default {};
</script>

<style scoped lang="scss">
.btn {
	display: inline-block;
	margin: 4px;
	padding: 6px 12px;
	border-radius: 4px;
	background-color: gray;
	color: white;
	cursor: pointer;
}
</style>

(B)Banana

slot 내용을 명확하게 구분하기 위해서는 v-slot: 혹은 #을 사용할 수 있습니다. 자식 컴포넌트에 <slot name=["구분값"]></slot>을 명시해 주고 부모 컴포넌트에서 <template v-slot:["구분값"] 혹은 #["구분값"]>내용 </template> 형식으로 사용할 수 있습니다.

 

약어

디렉티브	약어
v-bind	:
v-on	@
v-slot	#

 

참고 문서:

https://v2.ko.vuejs.org/v2/guide/components-slots.html