Vue 插槽（slot）详细介绍（对比版本变化，避免踩坑）

//插入C组件

页面效果如下：

此时检查页面元素，我们会发现，在原本B组件中的位置，替换成了C组件：

//B.vue

我是B组件

//观察页面元素,被替换成C组件

也印证了开篇对插槽作用的解释，即使用的组件指定的位置留一个坑，如果在外部，使用其组件包裹某内容（可以是任何模板代码，也可以是HTML，还可以是组件），则该内容就会被分发到处（一个有趣的说法就是把“坑”补上），渲染出来。当然，也可以不放任何内容，不影响组件渲染，就好比最开始的情况。

注意：如果B组件的 template 中没有包含一个 <slot> 元素，即不使用插槽，则该组件起始标签和结束标签之间的任何内容都会被抛弃。例如：

//B.vue

我是B组件

//不使用插槽

//A.vue

我是A组件

//此时在包裹的内容都会被抛弃

页面效果如下，在B组件中插入的C组件被抛弃了，因为B组件中没使用插槽：

后备（默认）内容

有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染。例如在B组件中：

我们可能希望这个B组件内绝大多数情况下都渲染文本“我是B组件”。为了将“我是B组件”作为后备内容，我们可以将它放在 <slot> 标签内：

我是B组件

现在当我在一个父级组件中使用B组件并且不提供任何插槽内容时：

后备内容“我是B组件”将会被渲染：

但是如果我们提供内容：

我是插槽内容

则这个提供的内容将会被渲染从而取代后备内容：

具名插槽

所谓具名插槽，顾名思义就是起了名字的插槽。有时我们需要多个插槽，例如当我们想使用某种通用模板：

对于这样的情况，<slot> 元素有一个特殊的 attribute：name。这个 attribute 可以用来定义额外的插槽：

//B.vue

一个不带 name 的 <slot> 出口会带有隐含的名字“default”。

在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 slot 指令，并以 slot 的参数的形式提供其名称（当然也可以直接放在标签中，如

）：

我是A组件

我是header部分

我是main（默认插槽）部分

我是footer部分

现在 <template> 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有slot 的 <template> 中的内容都会被视为默认插槽的内容。

页面效果如下：

观察页面元素，内容被放入相应名字的插槽中：

Tips：说到这里就不得不提一下，这种方式在项目中比较常用，可以当成一个复用（通用）模板组件。如多个组件的布局使用相似模板，只是具体内容不同，那么我们可以使用这种插槽方式封装成一个通用组件，在其他组件使用的时候只需要传对应的内容到对应名字的插槽即可，不需要将该模板在每个组件重新写一遍，减少代码冗余，大大提高开发效率。

作用域插槽

有时让插槽内容能够访问子组件中才有的数据是很有用的。现在，假设B组件：

我是B组件

{{obj.firstName}}

我们可能想换掉备用内容，用“lion”来显示。如下，在A组件：

我是A组件

{{obj.lastName}}

然而上述代码不会正常工作，因为只有B组件可以访问到 obj，而我们提供的内容是在父级渲染的，即在父级作用域中。页面并无变化：

为了让 obj在父级的插槽内容中可用，我们可以将 obj作为 <slot> 元素的一个 attribute 绑定上去：

我是B组件

{{obj.firstName}}

绑定在 <slot> 元素上的 attribute 被称为插槽 prop。现在在父级作用域中，我们可以使用带值的 slot-scope 来定义我们提供的插槽 prop 的名字：

我是A组件

{{data.obj.lastName}}

在这个例子中，我们选择将包含所有插槽 prop 的对象命名为 data，但你也可以使用任意你喜欢的名字。此时页面效果如下：

如果你有使用过ElementUI里面的表格el-table，当改变某一列展示的字段时，我们经常使用：

{{scope.row.xxx}}

插槽版本变化

v-slot 指令自 Vue 2.6.0 起被引入，提供更好的支持 slot 和 slot-scope attribute 的 API 替代方案。v-slot 完整的由来参见这份 RFC。在接下来所有的 2.x 版本中 slot 和 slot-scope attribute 仍会被支持，但已经被官方废弃且不会出现在 Vue 3 中。也就是说，在vue2版本中，我们仍可以使用slot跟slot-scope，但是在vue3中就只能使用v-slot了。

原来的带有slot的具名插槽

//B.vue

写法变化，使用v-slot

我是A组件

我是header部分

我是main（默认插槽）部分

我是footer部分

原来的作用域插槽

我是A组件

{{data.obj.lastName}}

写法变化，使用v-slot

我是A组件

{{data.obj.lastName}}

在 2.6.0 中，为具名插槽和作用域插槽引入了一个新的统一的语法 (即 `v-slot` 指令)。它取代了 `slot` 和 `slot-scope` 这两个目前已被废弃但未被移除且仍在[文档中]( )的 attribute。新语法的由来可查阅这份 [RFC]( )。注意slot版本变化，vue2中仍可以使用slot与slot-scope，但是vue3只能使用v-slot了，切记，避免踩坑。 # 最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
]( )。注意slot版本变化，vue2中仍可以使用slot与slot-scope，但是vue3只能使用v-slot了，切记，避免踩坑。

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-Of82flNj-1715655727665)]

[外链图片转存中…(img-JTArSXq0-1715655727666)]

[外链图片转存中…(img-vTBC4E03-1715655727666)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！