插槽的定义
官方解释：插槽就是vue实现的一套内容分发的API,将元素作为承载分发内容的出口
通俗解释：想要在一个组件标签中，加入一些内容，那就必须要在组件内声明slot元素，否则不会被渲染
一、默认插槽
父组件想要引入组件中显示，
我是你爸爸
，就必须先在子组件中用slot定义一个插槽，用来接收父组件传递的代码，才能正常的在页面中渲染
在父组件中
<son> <p>我是你爸爸</p> </son> 在子组件中
<div> <p>我是儿子</p> <slot></slot> </div> 页面就有添加的内容
二、具名插槽
定义：就是在slot标签上有一个属性:name,可以将指定的代码放到指定的插槽中
使用：元素有一个特殊attribute:name.这个是name属性的值就是插槽的名字，父组件中在一个元素上使用v-slot指令，并以v-slot的参数的形式提供其名称，一一对应。
子组件
<div> <header> <slot name="header"></slot> </header> <p>我是儿子</p> <slot></slot> <footer> <slot name="footer"></slot> </footer> </div> 父组件
<hr /> <son> <template v-slot:header> <p>我是爸爸的头部</p> </template> <p>我是你爸爸</p> <template v-slot:footer> <p>我是爸爸的腿部</p> </template> </son> 页面显示
三、作用域插槽
作用域插槽主要用于解决的问题是：当父组件向子组件插槽传递模板内容时存在访问子组件数据的问题
描述：作用域插槽其实就是带数据的插槽，即带参数的插槽，简单来说就是子组件提供给父组件的参数，该参数仅限于插槽中使用，父组件可根据子组件传过来的插槽数据进行不同的方式展现好热填充插槽内容。
子组件中
<div> <slot :user="user">{{user.name}</slot> </div> . . . . data() { return { user: { name: 'Alan', age: 23 } } }, 父组件中
<template v-slot:default="slotProps"> {{slotProps.user}} </template> 作用域插槽绑定了一套数据，父组件可以拿来用，所以样式父组件说了算，但内容可以显示子组件插槽绑定的
区别
单个插槽和具名插槽不绑定数据，所以父组件提供的模板一般要包括样式又包括内容
作用域插槽，父组件要提供一套样式
总结：
子组件中：
插槽用 <slot> 标签来确定渲染的位置，里面放如果父组件没传内容时的后备内容 具名插槽用name属性来表示插槽的名字，不传为默认插槽 作用域插槽在作用域上绑定属性来将子组件的信息传给父组件使用，这些属性会被挂在父组件slot-scope接收的对象上 //Child.vue <template> <div> <main> //默认插槽 <slot> //slot内为后备内容 <h3>没传内容</h3> </slot> </main> //具名插槽 <header> <slot name="header"> <h3>没传header插槽</h3> </slot> </header> //作用域插槽 <footer> <slot name="footer" testProps="子组件的值"> <h3>没传footer插槽</h3> </slot> </footer> </div> </template> <style scoped> div{ border:1px solid #000; } </style> 父组件在使用时：
默认插槽的话直接在子组件的标签内写入内容即可 具名插槽是在默认插槽的基础上加上slot属性，值为子组件插槽name属性值 作用域插槽则是通过slot-scope获取子组件的信息，在内容中使用。这里可以用解构语法去直接获取想要的属性 // Parent.vue <child> <!-- 默认插槽 --> <div>默认插槽</div> <!-- 具名插槽 --> <div slot="header">具名插槽header</div> <!-- 作用域插槽 --> <div slot="footer" slot-scope="slotProps"> {{slotProps.testProps}} </div> </child> v-slot
在vue2.6中。上述的API被软废弃（3.0正式废弃），取而代之的是内置指令v-slot，可以缩写为【#】
子组件用法保持不变，父组件中
slot属性弃用，具名插槽通过指令参数v-slot:插槽名的形式传入，可以简化为#插槽名 slot-scope属性弃用，作用域插槽通过v-slot:xxx="slotProps"的slotProps来获取子组件传出的属性 v-slot属性只能在template上使用，但在只有默认插槽时可以在组件标签上使用