1. App.vue
<template>
<div class="container">
<Category title="游戏" >
<template scope="atgui">
<ul >
<li v-for="(g,index) in atgui.games" :key="index">{{g}}</li>
</ul>
</template>
</Category>
<Category title="游戏" >
<!--结构赋值-->
<template scope="{games}">
<ol >
<li v-for="(g,index) in games" :key="index">{{g}}</li>
</ol>
</template>
</Category>
<Category title="游戏" >
<template scope="{games}">
<h4 v-for="(g,index) in games" :key="index">{{g}}</h4>
</template>
</Category>
</div>
</template>
<script>
import Category from './components/Category.vue';
export default {
name: 'App',
components:{
Category
},
}
</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 :games="games">我是默认的一些内容</slot>
</div>
</template>
<script>
export default {
name:'Category',
props:['title'],
data(){
return{
foods:['火锅','烧烤','小龙虾','牛排'],
games:['红色警戒','劲舞团','穿越火线','超级玛丽'],
films:['教父','拆弹专家','你好李焕英','小李飞刀']
}
}
}
</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>