在vue中，插槽是一个用的比较多的API，在官方的文档中，在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute，
vue插槽的作用：在vue中实现的一套分发内容的API，将slot元素作为承载内容分发出口。用人话说就是：想要在一个组件标签中添加新的内容，必须在该组件内声明一个slot元素，否则，添加的新内容则不会被渲染。
通常我们会在vue中将各种通用的功能单独拿出来进行封装，以便于后面复用，但是有时候需要复用的组件不是完美契合，这个时候就需要用到插槽，slot可以让用户拓展组件，更好的实现组件的复用。
组件插槽分为三种：
1：默认插槽
使用方法：
子组件：
<div>
<p>这里是子组件</p>
<slot></slot>
</div>
父组件：
<div>
<!--引用子组件-->
<myslot>
<p>这里是父组件</p>//当想在父组件中渲染这一行数据时，必须要在引用的子组件中定义一个slot标签
</myslot>
</div>
最后显示内容： 这里是子组件 这里是父组件
父组件想在引入的组件中显示 <p>这里是父组件</p>，就必须先在子组件中用slot定义一个插槽，用来接收父组件传递的代码，再才能正常的在页面中渲染
2：具名插槽
顾名思义，具名插槽是在slot标签上有一个属性：name，可以将指定的代码放入指定的插槽中
具体定义如下：
<!--子组件-->
<template>
<div>
<hander>
<!--这里放入name=“hander”的代码段-->
<slot name="hander"></slot>
</hander>
<footer>
<!--这里放入name=“footer”的代码段-->
<slot name="footer"></slot>
</footer>
</div>
</template>
<!--父组件-->
<div>
<p>大家好，这里是父组件</p>
<template v-slot:hander>
<span>这里是放入hander中的代码段</span>
</template>
<template v-slot:footer>
<span>这是放在footer中的代码段</span>
</template>
</div>
注意：v-slot指令只能写在template中
v-slot可以简写为#
3：作用域插槽
作用域插槽主要用于解决的问题是：当父组件向子组件插槽传递模板内容时存在访问子组件数据的问题
可以看例子：
<!--子组件-->
<template> <div> <slot>{{user.name}}<slot> </div> </template> <script> export default{ data(){ return{ user:{ name:"jay", age:18 } } } } </script>
当父组件引用子组件时，想将子组件中的user.name替换为user.age时，不可以直接在父组件中更改子组件中的user.name，因为在官方文档中，父级模板所有内容都是在父级作用域中编译的，子级模板所有内容都是在子作用域中编译的。
为了解决子组件的user不能在父组件中使用的问题，我们可以将user用属性绑定的方式传给父组件，父组件用一个自定义名称进行接收
子组件可以这么写：
<!--子组件-->
<template>
<div>
<slot :user="user">{{user.name}}<slot>
</div>
</template>
<script>
export default{
data(){
return{
user:{
name:"jay",
age:18
}
}
}
}
</script>
因此，父组件可以这么写：
<template>
<myslot>
<template v-slot="slotProps">
{{slotProps.user.age}}
</template>
</myslot>
</template>
<script>
import myslot from ‘@/component/myslot.vue‘
export default{
data(){
return{}
},
components:{
myslot
}
}
</script>
在子组件中，将自己的数据用属性绑定的方式传输给父组件，父组件在template中用v-slot="自定义名"，进行接收，再通过自定义名.进行数据访问。
原文：https://www.cnblogs.com/leizhijun/p/13488200.html