vue插槽有哪些种类（vue三种插槽的区别）



slot 在英语中作为名词时表示：（可投入东西的）狭长孔，狭槽；（在一系列事件中为某事安排的）时间，空档；（组织、团体等中的）位置，职位。

在 vue 中翻译成插槽：vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 slot 元素作为承载分发内容的出口。

slot 在 vue 1.x 和 2.x 版本中都是支持的，但 vue 3 中已经被官方废弃了。

slot-scope

scope 英语翻译成：范围，领域。slot-scope 也就是插槽作用域，你可能会有疑问为什么会用这么个东西？

在 vue 中父组件通过 slot 传入子组件时，父组件中的 slot 里的内容只能访问父组件作用域里的数据（父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的），但是此时如果我们又想访问子组件中的数据怎么办呢？这就要用到 slot-scope 这个家伙了。

印象最深的应该就是 element-ui 中的 table 组件了，在渲染表格行时我们经常需要用到 slot-scope 来获取当前行的数据，其实这里就是我们上面说到的场景：

slot-scope 主要也是配合 slot 一块使用，在 2.x 版本中都是支持的，但 vue 3 中已经被官方废弃了。

v-slot

vue 2.6.0 中引入，为具名插槽和作用域插槽提供新的统一的语法 v-slot 指令，用来代替 slot 和 slot-scope，所以如果 vue 使用的是 2.6 之后的版本就推荐直接使用 v-slot 了。

单个插槽

单个插槽最简单，一般适用于比较简单的单个自定义内容渲染，子组件：

具名插槽

有时我们需要在子组件中提前定义多个占位符，这样就需要为每个占位符起一个名字，然后父组件中就可以直接通过这个名字来找到自己的位置了。也就是多个 slot 时，我们就需要给每个 slot 加一个 name 名字，允许有一个不加名字（其实如果不加他有一个默认的 default 名字，父组件中没有被其他 slot 包含的内容都会被当成这个没有名字的 default 里的内容）。子组件：

父组件：

作用域插槽

也就是我们上面说到的 slot-scope，只不过新旧语法上有点差异，在子组件中直接在 slot 标签上绑定上数据属性：

父组件：

嵌套作用域插槽

一般用于第三方组件的二次封装，我们需要在一个作用域插槽中再嵌套一个作用域插槽，比如在 element-ui 的 table 组件上二次封装：

slots 用来访问被插槽分发的内容，每个具名插槽有其相应的 property (例如：v-slot:foo 中的内容将会在 vm.slots.foo 中被找到)，所以上面我们可以通过

父组件：

注意上面父组件中我们并没有用推荐的最新的 v-slot 指令，是因为我项目中用到的 element-ui 版本是 2.13.2，刚开始想用 v-slot 发现一直没效果，最终翻源码才发现 element-ui 2.13.2 版本中的 vue 是 2.5 的，而 v-slot 是 vue 2.6 中才引入的，所以如果想在插槽中使用最新的 v-slot 指令，记得看下 vue 的版本哟。

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/38236.html