一.默认插槽
一). 自定义模板Category 中<slot>
<template>
<div class="category">
<h3>{{title}}分类</h3>
<!-- 定义一个插槽(挖个坑,等着组件的使用者进行填充) -->
<slot>我是一些默认值,当使用者没有传递具体结构时,我会出现</slot>
</div>
</template>
<script>
export default {
name:'Category',
props:['title']
}
</script>
二). 使用插槽, 用组件名包裹 插槽的内容
<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'
export default {
name:'App',
components:{Category},
data() {
return {
foods:['火锅','烧烤','小龙虾','牛排'],
games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
films:['《教父》','《拆弹专家》','《你好,李焕英》','《尚硅谷》']
}
},
}
</script>
<style scoped>
.container{
display: flex;
justify-content: space-around;
}
</style>
二 .具名插槽
就是 在slot标签, 增加一个name
一). 自定义模板Category 中<slot>
<template>
<div>
<h3>{{title}}分类</h3>
<!-- 定义一个插槽(挖个坑,等着组件的使用者进行填充) -->
<slot name="center">我是一些默认值,当使用者没有传递具体结构时,我会出现1</slot>
<slot name="footer">我是一些默认值,当使用者没有传递具体结构时,我会出现2</slot>
</div>
</template>
<script>
export default {
name:'Category',
props:['title']
}
</script>
二) 使用插槽时也加上 slot="'"
<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 slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
<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'
export default {
name:'App',
components:{Category},
data() {
return {
foods:['火锅','烧烤','小龙虾','牛排'],
games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
films:['《教父》','《拆弹专家》','《你好,李焕英》','《尚硅谷》']
}
},
}
</script>
三. 作用域插槽
重点, 父组件中:定义 html
结构。数据不在父组件上,父组件只占位, 具体数据由子组件传递
实例:对游戏数据的三种呈现(有序、无序和h4大小)
Category.vue
(子组件)
- 使用插槽,呈现父组件中的内容
- 数据放入了子组件中
单项数据绑定 games
<template>
<div class="category">
<h3>{{ title }}分类</h3>
<slot :games="games"></slot>
</div>
</template>
<script>
export default {
name: "myCategory",
props: ["title"],
data() {
return {
games: ["王者荣耀", "侠盗飞车", "超级玛丽"],
};
},
};
</script>
<style scoped>
.category {
background-color: skyblue;
height: 300px;
width: 200px;
}
h3 {
text-align: center;
background-color: orange;
}
img {
width: 100%;
}
</style>
App.vue(父组件)-接受数据有3种方式
常规写法:先 scope="demo",再 demo.games
ES6+另一种常规写法写法:先 slot-scope="{games}",直接解构 games
ES6+新命名方式:v-slot="games",直接解构 games
3可以简写为:#:{games},
<template>
<div class="container">
<Category title="游戏">
<template scope="demo">
<ul>
<li v-for="(g, index) in demo.games" :key="index">{{ g }}</li>
</ul>
</template>
</Category>
<Category title="游戏">
<template slot-scope="{games}">
<ol>
<li v-for="(g, index) in games" :key="index">{{ g }}</li>
</ol>
</template>
</Category>
<Category title="游戏">
<template v-slot="{games}">
<h4><li v-for="(g, index) in games" :key="index">{{ g }}</li></h4>
</template>
</Category>
</div>
</template>
<script>
// 引入组件
import Category from "./components/Category.vue";
export default {
name: "App",
components: { Category },
};
</script>
<style scoped>
.container,
.foot {
display: flex;
justify-content: space-around;
}
video {
width: 100%;
}
h4 {
text-align: center;
}
</style>