官方说明： 在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。
因此普通插槽、具名插槽、作用插槽都用 v-slot
插槽：就是子组件中的提供给父组件传递内容的一个占位符，在子组件中用<slot></slot> 表示，父组件可以在这个引用子组件标签对中填充任何模板代码，如 HTML、组件等
1、普通插槽（即匿名插槽）：只做默认内容方法，可以接收所有未具名组件传递的内容
2.、具名插槽：只接受v-slot定义的相同name名称， 如果没有相同name不接受，不显示页面
3、作用域插槽：只针对普通、匿名插槽，子组件将数据传给父组件，父组件可以经过逻辑处理再分发给子组件渲染
父组件
<template>
<div class="app">
<child>
<p>普通/默认插槽</p>
<template v-slot:user>
<p>具名插槽 - user</p>
</template>
<template v-slot=“slotProps”> // v-slot 名称可以自定义
<p v-for="item in slotProps.slotData" :key="item">{{item}}</p>
<p>作用域插槽</p>
</template>
</child>
</div>
</template>
<script>
import Child from ‘./child.vue‘
export defualt {
components: { Child }
}
</script>
子组件
<template>
<div class="child">
<slot></slot> // 页面显示 普通、默认插槽
<slot name="user"></slot> // 页面显示 具名插槽 - use
<slot :slotData="slotData"></slot> // 作用域插槽 页面显示 1,2，作用域插槽
</div>
</template>
export default {
name: "child",
data() {
return {
slotData: [‘1‘, ‘2‘]
};
}
｝
注：因为单个插槽和具名插槽不绑定数据，所以父组件是提供的模板要既包括样式由包括内容的。而作用域插槽，父组件只需要提供一套样式。
原文：https://www.cnblogs.com/cp-cookie/p/13561057.html