컴포넌트 슬롯(Slot)

컴포넌트 슬롯

• 컴포넌트(vue)를 재사용할 수 있는 구성 요소로 생성해주는 도구
• 템플릿 조각을 자식 컴포넌트에 전달하고 자식 컴포넌트가 자체 템플릿 내에서 전달받은 템플릿 조각을 렌더링 할 수 있게 해준다.

슬롯을 사용하기 전 App.vue

<script>

import CustomButton from './components/CustomButton.vue';

export default{

components : {

CustomButton,

}

}

</script>

<template>

<CustomButton></CustomButton>

</template>

<style scoped>

 

</style>

 

슬롯을 사용하기 전 CustomButton.vue

<template>

<button class="btn">Click</button>

</template>

<style scoped>

.btn{

width: 100px;

height: 60px;

background-color: blueviolet;

color: white;

border-radius: 5px;

border: none;

}

</style>

 

이름이 없는 슬롯을 사용한 App.vue

<script>

import CustomButton from './components/CustomButton.vue';

export default{

components : {

CustomButton,

}

}

</script>

<template>

<CustomButton>더블클릭</CustomButton>

</template>

<style scoped>

 

</style>

 

이름이 없는 슬롯을 사용한 CustomButton.vue

<template>

<button class="btn">

<slot></slot>

</button>

</template>

<style scoped>

.btn{

width: 100px;

height: 60px;

background-color: blueviolet;

color: white;

border-radius: 5px;

border: none;

}

</style>

 

이름이 있는 슬롯을 사용한 App.vue

<script>

import CustomButton from './components/CustomButton.vue';

import DefaultLayout from './components/DefaultLayout.vue';

export default{

components : {

CustomButton,

DefaultLayout,

}

}

</script>

<template>

<CustomButton>더블클릭</CustomButton>

<DefaultLayout>

<template v-slot:header>

<header>

<h1>Header</h1>

</header>

</template>

<template v-slot:main>

<main>

<h1>Main 영역</h1>

</main>

</template>

<template v-slot:footer>

<footer>

<h1>Footer 영역</h1>

</footer>

</template>

</DefaultLayout>

 

</template>

<style scoped>

 

</style>

 

이름이 있는 슬롯을 사용한 CustomButton.vue

<template>

<button class="btn">

<slot></slot>

</button>

</template>

<style scoped>

.btn{

width: 100px;

height: 60px;

background-color: blueviolet;

color: white;

border-radius: 5px;

border: none;

}

</style>

 

이름이 있는 슬롯을 사용한 DefaultLayout.vue

<template>

<slot name="header"></slot>

<slot name="main"></slot>

<slot name="footer"></slot>

</template>

 

동적 슬롯을 사용한 App.vue

<script>

import DynamicLayout from './components/\bDynamicLayout.vue';

import CustomButton from './components/CustomButton.vue';

import DefaultLayout from './components/DefaultLayout.vue';

export default{

components : {

CustomButton,

DefaultLayout,

DynamicLayout

},

data(){

return{

dynamicNameHeader : 'header',

dynamicNameMain : 'main',

dynamicNameFooter : 'footer',

};

},

}

</script>

<template>

<CustomButton></CustomButton>

<DefaultLayout>

<template v-slot:header>

<header>

<h1>Header</h1>

</header>

</template>

<template v-slot:main>

<main>

<h1>Main 영역</h1>

</main>

</template>

<template v-slot:footer>

<footer>

<h1>Footer 영역</h1>

</footer>

</template>

</DefaultLayout>

<DynamicLayout>

<template #[dynamicNameHeader]>

<h2>동적 슬롯 헤더</h2>

</template>

<template #[dynamicNameMain]>

<h2>동적 슬롯 메인</h2>

</template>

<template #[dynamicNameFooter]>

<h2>동적 슬롯 푸터</h2>

</template>

</DynamicLayout>

</template>

<style scoped>

 

</style>

 

동적 슬롯을 사용한 CustomButton.vue

<template>

<button class="btn">

<slot>전송</slot>

</button>

</template>

<style scoped>

.btn{

width: 100px;

height: 60px;

background-color: blueviolet;

color: white;

border-radius: 5px;

border: none;

}

</style>

 

동적 슬롯을 사용한 DynamicLayout.vue

<template>

<h1>header</h1>

<slot name="header">

<h2>Default Header</h2>

</slot>

<slot name="main">

<h2>Default Main</h2>

</slot>

<slot name="footer">

<h2>Default Footer</h2>

</slot>

</template>

 

범위 슬롯을 사용한 App.vue

<script>

import BasicScope from '@/components/BasicScope.vue';

import BasicScope2 from '@/components/BasicScope2.vue';

export default {

components: {

BasicScope,

BasicScope2,

},

data() {

return {

message: 'parent',

count: 0,

};

},

};

</script>

<template>

<BasicScope2>

<h1>범위: {{ message }} / {{ count }}</h1>

</BasicScope2>

<BasicScope v-slot="slotProps">

<h1>{{ slotProps.message }} / {{ slotProps.count }}</h1>

</BasicScope>

</template>

<style scoped>

h1 {

color: blue;

}

</style>

 

범위 슬롯을 사용한 BasicScope.vue

<script>

export default {

data() {

return {

message: 'child',

count: 10,

};

},

};

</script>

<template>

<slot :message="message" :count="count"></slot>

</template>

<style scoped>

h1 {

color: red;

}

</style>

 

범위 슬롯을 사용한 BasicScope2.vue

<script>

export default {

data() {

return {

message: 'child',

count: 10,

};

},

};

</script>

<template>

<slot></slot>

</template>