1、使用场景:数据在组件自身,但是根据数据生成的结构需要组件的使用者来决定。
2、效果展示:(使用的组件是同一组件,数据也一样,但是结构不一样)
3、具体编码:
App.vue页面的代码
<template>
<div class="container">
<Category title="游戏">
<template scope="dataObj">
<ul>
<li v-for="(g,index) in dataObj.games" :key="index">{{g}}</li>
</ul>
</template>
</Category>
<Category title="游戏">
<template scope="dataObj">
<ol>
<li v-for="(g,index) in dataObj.games" :key="index">{{g}}</li>
</ol>
</template>
</Category>
<Category title="游戏">
<template scope="dataObj">
<h4 v-for="(g,index) in dataObj.games" :key="index">
{{g}}
</h4>
</template>
</Category>
</div>
</template>
<script>
import Category from "./components/Category.vue";
export default {
name: "App",
components: {
Category,
},
data() {
return {};
},
};
</script>
<style>
.container,
.foot {
display: flex;
justify-content: space-around;
}
h4 {
text-align: center;
}
</style>
子组件Category的代码:
<template>
<div class="category">
<h3>{{ title }}分类</h3>
<slot :games="games">默认的内容</slot>
</div>
</template>
<script>
export default {
name: "Category",
props: ["title"],
data(){
return {
games: ["红色警戒", "穿越火线", "qq飞车", "超级玛丽"],
}
}
};
</script>
<style>
.category {
background-color: skyblue;
width: 200px;
height: 300px;
}
h3 {
background-color: orange;
text-align: center;
}
img {
width: 100%;
}
video {
width: 100%;
}
</style>
4、代码细节分析: