1. App.vue
<template>
<div class="container">
<Category title="美食" >
<img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
</Category>
<Category title="游戏" >
<ul>
<li v-for="(g,index) in games" :key="index">{{g}}</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 {
name: 'App',
components:{
Category
},
data(){
return{
foods:['火锅','烧烤','小龙虾','牛排'],
games:['红色警戒','劲舞团','穿越火线','超级玛丽'],
films:['教父','拆弹专家','你好李焕英','小李飞刀']
}
}
}
</script>
<style>
.container{
display: flex;
justify-content: space-around;
}
video{
width:100%
}
img{
width:100%
}
</style>
2. Category.vue
<template>
<div class="category">
<h3>{{title}}分类</h3>
<!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
<slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</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>