总结：
1.作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间的通讯方式，适用于父组件-->子组件
2.分类：默认插槽，具名插槽，作用域插槽
使用方式：
一、默认插槽：
父组件中：
<Category>
<div>html结构</div>
</Category>
子组件中：
<template>
<div>
<!-- 定义插槽 --!>
<slot>插槽默认内容。。。</slot>
</div>
</template>
二、具名插槽：
父组件中：
<Category>
<template slot="center">html结构1</template>
<template v-slot:footer>html结构1</template>
</Category>
子组件中：
<template>
<div>
<!-- 定义插槽 --!>
<slot name="center">插槽默认内容。。。</slot>
<slot name="footer">插槽默认内容。。。</slot>
</div>
</template>
三、作用域插槽
1.理解：数据在组件的自身，但根据数据生成的解构需要组件的使用者来决定（games数据在Category组建身上中，但使用数据所遍历出来的结构由App组建决定）
2.具体编码：
父组件中：
<Category>
<template scope="scopeData">
<!-- 生成的是ul列表 --!>
<ul v-for="(g, index) in scopeData.games" :key="index">
<li> {{ g }}</li>
</ul>
</template>
</Category>
子组件中：
<template>
<div>
<slot :games="games"></slot>
</div>
</template>
<script>
export default {
name: 'category',
props: ['title'],
data() {
return {
//数据在子组件自身
games: ['王者荣耀', '死神', '绝地求生', '跑酷']
}
}
}
</script>
示例：
- 默认插槽
//jobNumConfigs.vue 组件
<template>
<div class="container">
<Category title="美食">
<img src="https://t7.baidu.com/it/u=963301259,1982396977&fm=193&f=GIF" />
</Category>
<Category title="游戏">
<ul v-for="(item, index) in games" :key="index">
<li>
{{ item }}
</li>
</ul>
</Category>
<Category title="电影">
<video controls src="https://www.bilibili.com/bangumi/play/ep718241?from_spmid=666.4.banner.0"></video>
</Category>
</div>
</template>
<script>
import Category from './components/Category.vue'
export default {
name: 'jobNumConfigs',
components: {
Category
},
data() {
return {
foods: ['火锅', '烧烤', '小龙虾', '海鲜'],
games: ['王者荣耀', '死神', '绝地求生', '跑酷'],
films: ['去有风的地方', '东宫', '半夏', '野蛮生长']
}
}
}
</script>
<style>
.container {
display: flex;
justify-content: space-around;
}
img,
video {
width: 100%;
}
</style>
-------------------------------------------------------------------------------
//Category.vue组件
<template>
<div class="category">
<h3>{{ title }}</h3>
<!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
<slot>
我是一些默认值，当使用者没有传递具体结构时，我会出现
</slot>
</div>
</template>
<script>
export default {
name: 'category',
props: ['title']
}
</script>
<style>
.category {
width: 200px;
height: 200px;
background-color: skyblue;
}
h3 {
background-color: orange;
text-align: center;
}
</style>
- 具名插槽(有名字的)
<template>
<div class="container">
<Category title="美食">
<img slot="center" src="https://t7.baidu.com/it/u=963301259,1982396977&fm=193&f=GIF" />
<a slot="footer" href="https://image.baidu.com/">美食街</a>
</Category>
<Category title="游戏">
<ul v-for="(item, index) in games" :key="index" slot="center">
<li>
{{ item }}
</li>
</ul>
<div slot="footer" class="foot">
<a href="https://image.baidu.com/">游戏1</a>
<a href="https://image.baidu.com/">游戏2</a>
</div>
</Category>
<Category title="电影">
<video slot="center" controls src="https://www.bilibili.com/bangumi/play/ep718241?from_spmid=666.4.banner.0"></video>
<!-- 只有使用template模版的时候才能用这种写法：v-slot:footer -->
<template slot="footer">
<div class="foot">
<a href="https://image.baidu.com/">游戏1</a>
<a href="https://image.baidu.com/">游戏2</a>
</div>
<h4>前来观影</h4>
</template>
</Category>
</div>
</template>
<script>
import Category from './components/Category.vue'
export default {
name: 'jobNumConfigs',
components: {
Category
},
data() {
return {
foods: ['火锅', '烧烤', '小龙虾', '海鲜'],
games: ['王者荣耀', '死神', '绝地求生', '跑酷'],
films: ['去有风的地方', '东宫', '半夏', '野蛮生长']
}
}
}
</script>
<style>
.container {
display: flex;
justify-content: space-around;
}
img,
video {
width: 100%;
}
h4 {
text-align: center;
}
</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>
.category {
width: 200px;
height: 200px;
background-color: #ddd;
}
h3 {
background-color: orange;
text-align: center;
}
</style>
- 作用域插槽
<template>
<div class="container">
<Category title="游戏">
<!-- <template scope="info"> 搭配使用，否则得不到数据源 -->
<template scope="{ games }">//es6的解构
<ul v-for="(item, index) in games" :key="index">
<li>
{{ item }}
</li>
</ul>
</template>
</Category>
<Category title="游戏">
<template scope="info">
{{ info }}
<h4 v-for="(item, index) in info.games" :key="index">{{ item }}</h4>
</template>
</Category>
</div>
</template>
<script>
import Category from './components/Category.vue'
export default {
name: 'jobNumConfigs',
components: {
Category
}
}
</script>
<style>
.container {
display: flex;
justify-content: space-around;
}
img,
video {
width: 100%;
}
h4 {
text-align: center;
}
</style>
--------------------------------------------------------------------------------
<template>
<div class="category">
<h3>{{ title }}</h3>
<!-- 把category中定义的games数据通过自定义插槽的方式传递给它的使用者 -->
<slot :games="games"></slot>
</div>
</template>
<script>
export default {
name: 'category',
props: ['title'],
data() {
return {
games: ['王者荣耀', '死神', '绝地求生', '跑酷']
}
}
}
</script>
<style>
.category {
width: 200px;
height: 200px;
background-color: #ddd;
}
h3 {
background-color: orange;
text-align: center;
}
</style>
