最近发布不久的Vue 2.6，使用插槽的语法变得更加简洁。 对插槽的这种改变让我对发现插槽的潜在功能感兴趣，以便为我们基于Vue的项目提供可重用性，新功能和更清晰的可读性。 真正有能力的插槽是什么？
如果你是Vue的新手，或者还没有看到2.6版的变化，请继续阅读。也许学习插槽的最佳资源是Vue自己的文档，但是我将在这里给出一个纲要。
想阅读更多优质文章请猛戳GitHub博客 ,一年百来篇优质文章等着你！
插槽是什么？
插槽是Vue组件的一种机制，它允许你以一种不同于严格的父子关系的方式组合组件。插槽为你提供了一个将内容放置到新位置或使组件更通用的出口。从一个简单的例子开始：
// frame.vue <template> <div> <slot></slot> </div> </template>
这个组件最外层是一个 div 。假设 div 的存在是为了围绕其内容创建一个样式框架。这个组件可以通用地用于将框架包围在wq你想要的任何内容上，来看看它是怎么用的。这里的 frame 组件指的是我们刚才做的组件。
// app.vue <template> <frame><img src="https://www.jb51.net/an-image.jpg"></frame> </template>
在开始和结束 frame 标记之间的内容将插入到插槽所在的 frame 组件中，替换 slot 标记。这是最基本的方法。还可以简单地通过填充指定要放入槽中的默认内容
// frame.vue <template> <div> <slot>如果这里没有指定任何内容，这就是默认内容</slot> </div> </template>
所以现在如果我们这样使用它：
// app.vue <template> <frame /> </template>
“ 如果这里没有指定任何内容，这就是默认内容 ”是默认内容，但是如果像以前那样使用它，默认文本将被 img 标记覆盖。
多个/命名的插槽
可以向组件添加多个插槽，但是如果这样做了，那么除了其中一个之外，其他所有插槽都需要有名称。如果有一个没有名称的槽，它就是默认槽。下面是如何创建多个插槽：
// titled-frame.vue <template> <div> <header><h2> <slot>Title</slot> </h2></header> <slot>如果这里没有指定任何内容，这就是默认内容</slot> </div> </template>
我们保留了相同的默认槽，但这次我们添加了一个名为 header 的槽，可以在其中输入标题，用法如下：
// app.vue <template> <titled-frame> <template v-slot:header> <!-- The code below goes into the header slot --> My Image's Title </template> <!-- The code below goes into the default slot --> <img src="https://www.jb51.net/an-image.jpg"> </titled-frame> </template>
就像之前一样，如果我们想将内容添加到默认槽中，只需将其直接放在 titled-frame 组件中。但是，要将内容添加到命名槽中，我们需要用 v-slot 指令将代码包裹在在 template 标记中。在 v-slot 之后添加冒号 (:) ，然后写出要传递内容的 slot 的名称。
注意， v-slot 是 Vue 2.6 的新版本，所以如果你使用的是旧版本，则需要阅读 关于不推荐的slot语法的文档。
作用域插槽
还需要知道的另一件事是插槽可以将数据/函数传递给他们的孩子。 为了证明这一点，我们需要一个完全不同的带有插槽的示例组件：创建一个组件，该组件将当前用户的数据提供给其插槽：
// current-user.vue <template> <span> <slot v-bind:user="user"> {{ user.lastName }} </slot> </span> </template> <script> export default { data () { return { user: ... } } } </script>
该组件有一个名为 user 的属性，其中包含关于用户的详细信息。默认情况下，组件显示用户的姓，但请注意，它使用 v-bind 将用户数据绑定到 slot 。这样，我们就可以使用这个组件向它的后代提供用户数据
// app.vue <template> <current-user> <template v-slot:default="slotProps">{{ slotProps.user.firstName }}</template> </current-user> </template>
为了访问传递给 slot 的数据，我们使用v-slot指令的值指定作用域变量的名称。
这里有几点需要注意：
我们指定了 default 的名称，但是不需要为默认槽指定名称。相反，我们可以使用v -slot="slotProps" 。
不需要使用 slotProps 作为名称，可以随便叫它什么。
如果只使用默认槽，可以跳过内部 template 标记，直接将 v-slot 指令放到当前 current-user 上。