vue slot 插槽使用详解
目录
slot 介绍
2.6.0以下版本
2.6.0及以上版本
作用域插槽说明
$slots 属性
slot 在组件开发中的使用
slot 介绍
vue 对于前端的重要性不言而喻，而插槽对于 vue 的重要性亦是如此，在高阶组件的封装中离不开插槽的使用，所以学会使用 slot 对前端来讲很重要。
官网说：
Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将
元素作为承载分发内容的出口。
所以，插槽其实是 vue 提供的用于内容分发的 API，用 slot 来作为承载分发内容的出口而已。
如下组件，slot 元素将作为承载传入 content-box 组件所有内容的出口，即传入 content-box 组件的所有内容都将被渲染到 content-box 组件内部 slot 元素的位置。
slot 元素可以承载任何内容
使用：
当前所有内容都会被挂载到slot元素上
123
如果
即
vue 提供的 slot 共有两个版本，在vue 2.6.0 及后代版本中 vue 为 slot 引入了新的语法，在日常开发中可能更多使用的是 2.6.0 新版本的语法，但是在一些UI组件的使用中仍需关注旧版本的语法，详细使用见官方文档：vue slot 插槽文档。
下面说说不同版本 slot 的使用
2.6.0以下版本
声明
// HelloWord 组件
默认插槽的后备内容
{{title}}
使用
这是将被默认插槽接收的内容
这是将被具名插槽接收的内容
{{data.firstName}}
2.6.0及以上版本
2.6.0及以下版本中 slot 插槽的使用方式与之前不同，声明方式相同：
声明
// HelloWord 组件
默认插槽的后备内容
{{title}}
使用
2.6以后版本， slot 使用方式变为 v-slot。
v-slot 只能添加在 上，只有一种例外情况。
这是将被默认插槽接收的内容
这是将被默认插槽接收的内容
或者
这是将被默认插槽接收的内容
这是将被具名插槽接收的内容
{{data.firstName}}
具名插槽的缩写：
跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。
例如 v-slot:header 可以被重写为 #header。
作用域插槽说明
先看vue 官方对于组件模板作用域及编译的说明：
父级模板里的所有内容都是在父级作用域中编译的；
子模板里的所有内容都是在子作用域中编译的。
所以在父集作用域中无法访问子作用域中的数据。
这就是为什么需要使用作用域插槽：因为在父组件作用域中不能访问子组件作用域中的数据。
有时让插槽内容能够访问子组件中才有的数据是很有用的，如下在父组件中访问子组件数据，会报错。
子组件模板：
父组件模板：
这是传递给title solt的内容
{{data.firstName}}
报错如下：
所以为了解决这个问题，就需要使用作用域插槽，在子组件中可以将 data 绑定为 slot 的属性，在父组件作用域中使用带值得 v-slot 来接收，如下：
// 子组件模板
// 父组件模板
这是传递给title solt的内容
{{data.firstName}}
这样在父组件模板内便可以访问到子组件中的数据了。
注意：在父组件内，子组件模板内的作用域依然属于父集，即
$slots 属性
$slots 用来访问被插槽分发的内容，在组件开发中承载了非常重要的作用，详情请看官网 vue $slots。
2.6之后与之前版本的 $slots 属性略有不同，下面做一个简单对比
子组件模板如下：
2.6版本以下组件使用：
这是将被默认插槽接收的内容
这是传递给title插槽的内容
输出如下：
2.6 及以上版本使用：
这是将被默认插槽接收的内容
这是传递给title solt的内容
输出如下：
很明显两个版本 $slots 属性值得类型是不同的，更深层次这里不做讨论，推荐查看：
Vue3.0破坏性变化----$slots
slot 在组件开发中的使用
在组件封装中合理的使用 slot 可以开发更加高效强大的组件，重点是对于 $slots 属性的应用。
下面贴上 u-cell 组件的源码，学习 slot 的封装技巧。
{{ title }}
{{ label }}
{{ value }}