Vue中三种插槽slot使用示例
1、默认插槽
子组件Category：
// Category.vue
<template>
<div class="category">
<h3>{{title}}分类</h3>
<slot/>
</div>
</template>
<script>
export default {
name: 'Category',
props: ['title'],
}
</script>
<style scoped>
.category{
background-color: skyblue;
width: 200px;
height: 300px;
}
h3 {
text-align: center;
background-color: orange;
}
img {
width: 100%;
}
video {
width: 100%;
}
</style>父组件App：
// App.vue
<template>
<div class="containter">
<Category title='美食'>
<img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="" srcset="">
</Category>
<Category title='游戏'>
<ul>
<li v-for="(item, index) in games" :key='index'>{{item}}</li>
</ul>
</Category>
<Category title='电影'>
<video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
</Category>
</div>
</template>
<script>
import Category from './components/Category.vue';
export default {
components:{
Category,
},
data() {
return {
foods: ['火锅', '烧烤', '小龙虾', '牛排'],
games: ['红色警戒', '穿越火线', '劲舞团', '超级玛丽'],
films: ['《教父》', '《拆弹专家》', '《你好，李焕英》', '《尚硅谷》'],
}
},
}
</script>
<style>
.containter{
display: flex;
justify-content: space-around;
}
</style>2、具名插槽
子组件Category：
<template>
<div class="category">
<h3>{{title}}分类</h3>
<slot name='center'/>
<slot name='footer'/>
</div>
</template>
<script>
export default {
name: 'Category',
props: ['title'],
}
</script>
<style scoped>
.category{
background-color: skyblue;
width: 200px;
height: 300px;
}
h3 {
text-align: center;
background-color: orange;
}
img {
width: 100%;
}
video {
width: 100%;
}
</style>父组件APP：
<template>
<div class="containter">
<Category title='美食'>
<img slot='center' src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="" srcset="">
<a class="footer" slot='footer' href="https://www.baidu.com">更多美食</a>
</Category>
<Category title='游戏'>
<ul slot="center">
<li v-for="(item, index) in games" :key='index'>{{item}}</li>
</ul>
<div slot="footer" class="footer">
<a href="https://www.baidu.com">单机游戏</a>
<a href="https://www.baidu.com">网络游戏</a>
</div>
</Category>
<Category title='电影'>
<video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
<!-- <template slot="footer"> -->
<template v-slot:footer>
<div class="footer">
<a href="https://www.baidu.com">经典</a>
<a href="https://www.baidu.com">热门</a>
<a href="https://www.baidu.com">推荐</a>
</div>
<h4>欢迎前来观影</h4>
</template>
</Category>
</div>
</template>
<script>
import Category from './components/Category.vue';
export default {
components:{
Category,
},
data() {
return {
foods: ['火锅', '烧烤', '小龙虾', '牛排'],
games: ['红色警戒', '穿越火线', '劲舞团', '超级玛丽'],
films: ['《教父》', '《拆弹专家》', '《你好，李焕英》', '《尚硅谷》'],
}
},
}
</script>
<style>
.containter, .footer{
display: flex;
justify-content: space-around;
}
h4 {
text-align: center;
}
</style>