component 폴더에 slot 폴더 생성
src/component/slot/CardView.vue
CardView.vue
<template>
<div class="card">
<div class="card-header"><slot name="header"></slot></div>
<div class="card-body"><slot name="body"></slot></div>
<div class="card-footer"><slot name="footer"></slot></div>
<slot>default Data</slot>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
padding: 1rem;
margin-bottom: 1rem;
widows: 200px;
}
.card-header {
color: red;
}
.card-body {
color: green;
}
.card-footer {
color: pink;
}
</style>
slot
app.vue
<template>
<div>
<!-- 슬롯 -->
<h1>Hello Vue!!</h1>
<CardView> Hello slot!!! </CardView>
<CardView>
<img src="https://placeimg.com/100/200/any" alt="random" />
</CardView>
<CardView>
<ul>
<li>짬뽕</li>
<li>짜장면</li>
</ul></CardView
>
<card-view></card-view>
<card-view>
<template v-slot:header>
<div>
<h2>Random Image</h2>
</div>
</template>
<template v-slot:body>
<div>
<img src="https://placeimg.com/100/200/any" alt="random" />
</div>
</template>
<template v-slot:footer>
<div>
<small>thank you</small>
</div>
</template>
</card-view>
</div>
</template>
<script>
import CardView from "./components/slot/CardView.vue";
export default {
name: "App",
components: {
CardView,
},
provide() {
return {};
},
data() {
return {
username: "bada",
};
},
methods: {},
directives: {},
computed: {},
watch: {},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>