简介：插槽是一种实现组件之间通信的技术，能够实现父组件向子组件传递HTML结构的技术，注意不是传递数据，而是传递结构，这些结构包括：HTML元素、组件等。
目录
1、默认插槽
2、具名插槽
3、作用域插槽
4、Vue3.0的插槽
1、默认插槽
之前我们已经知道通过在组件标签当作使用key:"values"写属性，就可以给子组件传递一些数据过去。那么我们可不可以给子组件传递一些HTML标签呢？答案是可以的，那么给子组件的标签体里面写的数据和HTML标签如何被子组件接收并进行展示呢？
在父组件的模板当中，给子组件的标签体中添加一个HTML原生标签元素，如果需要子组件获取这个HTML元素，则需要在子组件的模板当中写一个<slot></slot>标签，这样才能接收到父组件传递过来的HTML元素。
<template><div class="container"><Category title="美食" >//传递一个img标签结构给子组件<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 {games:['植物大战僵尸','红色警戒','空洞骑士','王国']}},}
</script><style scoped>.container{display: flex;justify-content: space-around;}
</style>
上面在父组件当中给子组件传递了一个img的HTML元素，下面的子组件的<slot>则会被对应的替换掉，如果没有正确接收到父组件传递过来的HTML元素，则会显示默认值。
<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;}video{width: 100%;}img{width: 100%;}
</style>
2、具名插槽
当父组件传递过去HTML元素不止一个，而且为了保证HTML文档流的顺序，则需要通过具体的名字指定哪个HTML元素放到哪个位置。
<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 {games:['植物大战僵尸','红色警戒','空洞骑士','王国']}},}
</script><style>.container,.foot{display: flex;justify-content: space-around;}h4{text-align: center;}
</style>
上面传递了两个HTML元素给子组件，下面在<slot>中使用name标注好name，让传递过来的HTML元素找到家。
<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;}video{width: 100%;}img{width: 100%;}
</style>
3、作用域插槽
通过默认插槽和具名插槽，我们已经知道这种方式的本质就是：给子组件传递数据的同时把一些结构带过去。那可不可以直接传结构过去，而不传数据过去呢？答案是可以的。使用作用域插槽就可以把结构传过去，而不传数据，数据使用子组件自己的。
由于传过去的是结构，所以必须使用<template>结构<template>的形式，把结构使用<template>包起来。然后使用scope定义一个引用，这个引用就是子组件实例vc。这样就实现了值传递结构过去，还可以在父组件操作子组件的数据，实现子组件的数据向父组件传递。
注意：在vue2.6.0之后，slot-scope被替换为v-slot指令。
父组件中：<Category><template slot-scope="scopeData"><!-- 生成的是ul列表 --><ul><li v-for="g in scopeData.games" :key="g">{{g}}</li></ul></template></Category><Category><template slot-scope="scopeData"><!-- 生成的是h4标题 --><h4 v-for="g in scopeData.games" :key="g">{{g}}</h4></template></Category>
子组件中：<template><div><slot :games="games"></slot></div></template><script>export default {name:'Category',props:['title'],//数据在子组件自身data() {return {games:['红色警戒','穿越火线','劲舞团','超级玛丽']}},}</script>
4、Vue3.0的插槽
slot属性弃用，具名插槽通过指令参数v-slot:插槽名的形式传入，可以简化为#插槽名slot-scope属性弃用，作用域插槽通过v-slot:xxx="slotProps"的slotProps来获取子组件传出的属性v-slot属性只能在template上使用，但在只有默认插槽时可以在组件标签上使用。
//Parent
<template><child><!--默认插槽--><template v-slot><div>默认插槽</div></template><!--具名插槽--><template #header><div>具名插槽</div></template><!--作用域插槽--><template #footer="slotProps"><div>{{slotProps.testProps}}</div></template><child>
</template>主要区别：slot、slot-scope都是组件属性名。而v-slot是Vue指令，且外层必须包裹标签<template>，也就是v-slot必须写在<template>里面，也就是<template v-slot>，只有在父组件这么写，子组件仍然写slot标签。
- 默认插槽slot改为：v-slot:default；
- 具名插槽slot="nn"改为u：v-slot:nn;
- 作用域插槽slot-scope="data_name"改为：v-slot:default="data_name"，其中default是插槽名字，data_name是子组件数据的引用对象。
