默认插槽
1.作用：让父组件可以向子组件指定位置插入 html 结构，也是一种组件间通信的方式，适用于父组件 ===> 子组件 2.分类：默认插槽、具名插槽、作用域插槽 3.使用方式
（1）默认插槽
父组件
<Category>
<div></div>
</Category>
子组件
<template>
<div >
<slot>我是一些默认值，当使用者没有传递具体结构时我会出现</slot>
</div>
</template>
App.vue
<template>
<div class="container">
<Category title="美食">
<img src="https:/s3.ax1x.com/2021/01/16/srJ1q0.jpg" alt="">
</Category>
<Category title="游戏">
<ul>
<li v-for="(gameItem,index) in games" :key="index">{{gameItem}}</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>
.container{
display: flex;
justify-content: space-around;
}
</style>
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;
}
img{
width: 100%;
}
video{
width: 100%;
}
</style>
具名插槽
父组件
<Category title="美食">
<template slot="center">
<div>结构1</div>
</template>
<template slot="footer">
<div>结构2</div>
</template>
</Category>
子组件
<template>
<div class="category">
<!-- 定义一个插槽，等着组件使用者进行填充 -->
<slot name="center">我是一些默认值</slot>
<slot name="footer"></slot>
</div>
</template>
App.vue
<template>
<div class="container">
<Category title="美食">
<img slot="center" src="https:/s3.ax1x.com/2021/01/16/srJ1q0.jpg" alt="">
<a slot="footer" href="https://www.baidu.com/">更多美食</a>
</Category>
<Category title="游戏">
<ul slot="center">
<li v-for="(gameItem,index) in games" :key="index">{{gameItem}}</li>
</ul>
<div slot="footer" class="foot">
<a href="https://www.baidu.com/">单机游戏</a>
<a href="https://www.baidu.com/">网络游戏</a>
</div>
</Category>
<Category title="电影">
<video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
<template v-slot:footer>
<div slot="footer" class="foot">
<a href="https://www.baidu.com/">经典</a>
<a href="https://www.baidu.com/">热门</a>
<a href="https://www.baidu.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>
<style>
.container,.foot{
display: flex;
justify-content: space-around;
}
</style>
Category.vue
<template>
<div class="category">
<h3>{{title}}</h3>
<!-- 定义一个插槽，等着组件使用者进行填充 -->
<slot name="center">我是一些默认值，当使用者没有传递具体结构时我会出现1</slot>
<slot name="footer">我是一些默认值，当使用者没有传递具体结构时我会出现2</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;
}
img{
width: 100%;
}
video{
width: 100%;
}
</style>
作用域插槽
（1）理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定（games 数据在 category 组件中，但使用数据所遍历出来的结构由 APP 组件决定）
（2）具体编码
父组件
<Category>
<template scope="scopeData">
<ul>
<li v-for="(gameItem, index) in scopeData.games" :key="index"> {{ gameItem }} </li>
</ul>
</template>
</Category>
子组件
<template>
<div class="category">
<h3>{{ title }}</h3>
<slot :scopeData="games">我是一些默认值</slot>
</div>
</template>
App.vue
<template>
<div class="container">
<Category title="游戏">
<template scope="game">
<ul>
<li v-for="(gameItem, index) in game.games" :key="index">
{{ gameItem }}
</li>
</ul>
</template>
</Category>
<Category title="游戏">
<template scope="{games}">
<ol>
<li v-for="(gameItem, index) in games" :key="index">
{{ gameItem }}
</li>
</ol>
</template>
</Category>
<Category title="游戏">
<template slot-scope="{ games }">
<h4 v-for="(gameItem, index) in games" :key="index">{{ gameItem }}</h4>
</template>
</Category>
</div>
</template>
<script>
// 引入组件
import Category from './components/Category'
export default {
name: 'App',
components: { Category },
}
</script>
<style>
.container,
.foot {
display: flex;
justify-content: space-around;
}
</style>
Category.vue
<template>
<div class="category">
<h3>{{ title }}</h3>
<!-- 定义一个插槽，等着组件使用者进行填充 -->
<slot :games="games"
>我是一些默认值，当使用者没有传递具体结构时我会出现1</slot
>
</div>
</template>
<script>
export default {
name: 'Category',
props: ['title'],
data() {
return {
games: ['穿越火线', '红色警戒', '超级玛丽'],
}
},
}
</script>
<style scoped>
.category {
background-color: skyblue;
width: 200px;
height: 300px;
}
h3 {
text-align: center;
background-color: orange;
}
img {
width: 100%;
}
video {
width: 100%;
}
</style>
网友评论