1.App.vue
<template>
<div class="container">
<Category title="美食" >
<img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
<a slot="footer" href="http:www.atguigu.com">更多美食</a>
</Category>
<Category title="游戏" >
<ul slot="center">
<li v-for="(g,index) in games" :key="index">{{g}}</li>
</ul>
<div class="foot" slot="footer">
<a href="http:www.atguigu.com">单机游戏</a>
<a href="http:www.atguigu.com">网络游戏</a>
</div>
</Category>
<Category title="电影">
<video controls slot="center" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
<!-- <template>
<div class="foot" slot="footer">
<a href="http:www.atguigu.com">经典</a>
<a href="http:www.atguigu.com">热门</a>
<a href="http:www.atguigu.com">推荐</a>
</div>
<h4>欢迎学习</h4>
</template> -->
<!--新写法 只适用于template-->
<template v-slot:footer>
<div class="foot">
<a href="http:www.atguigu.com">经典</a>
<a href="http:www.atguigu.com">热门</a>
<a href="http:www.atguigu.com">推荐</a>
</div>
<h4>欢迎学习</h4>
</template>
</Category>
</div>
</template>
<script>
import Category from './components/Category.vue';
export default {
name: 'App',
components:{
Category
},
data(){
return{
foods:['火锅','烧烤','小龙虾','牛排'],
games:['红色警戒','劲舞团','穿越火线','超级玛丽'],
films:['教父','拆弹专家','你好李焕英','小李飞刀']
}
}
}
</script>
<style>
.container,.foot{
display: flex;
justify-content: space-around;
}
h4{
text-align: center;
}
video{
width:100%
}
img{
width:100%
}
</style>
2. Category.vue
<template>
<div class="category">
<h3>{{title}}分类</h3>
<!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
<slot name="center">我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
<slot name="footer">我是一些默认值，当使用者没有传递具体结构时，我会出现</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;
}
video{
width: 100%;
}
img{
width: 100%;
}
</style>