【vue学习】slot

在 2.6.0引入 v-slot指令【缩写为#】

提示：v-slot can only be used on components or <template>.

即v-slot 只能添加在一个 <template> 上，这一点和已经废弃的 slot 特性不同。

在接下来所有的 2.x 版本中 slot 和 slot-scope 特性仍会被支持，
但已经被官方废弃且不会出现在 Vue 3 中。

什么是插槽slot?

假设上面定义的组件名为custDemo,下图是调用过程

说起来，这叫内容分发：Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 元素作为承载分发内容的出口。

什么是作用域插槽slot-scope

调用上面定义的组件：这里的slotProps即对应slot中绑定的各种属性。
可以直接写成slot-scope="{user}"，若slot中绑定了多个属性，如除了user，还有title,则可以写成slot-scope="{user, title}"；调用的时候直接user.name即可。

为啥要有这个slot-scope呢？

父组件调用子组件的时候，对应的slot分发的内容可以直接访问子组件中的实例属性（即data中的数据；当然props中的也可以，只是没有必要，props中的父组件就可以直接访问了，不过props中如list列表循环中的每一项也可以绑定到slot中，参看下面的官方ul案例）

v-slot写法

上述的案例改成v-slot指令的写法（v-slot简写为#也可）：

有啥区别呢？

1. template处不能用其他标签替换，slot=""时既可以是template，也可以是普通标签。
2. v-slot:default="slotProps" v-slot:stl="slotProps" 这里的default也都带着吧；只有匿名的时候可以不带，但是如果用#缩写那必须都要。
3. 3.0后原来的slot和slot-scope写法将会被完全废弃。当然如果你的项目中的vue是2.6.0之前的版本，v-slot也不能用。
4. 注意：要修改vue版本的话，对应vue-template-compiler的版本不要忘记修改。
   

官网中有个ul列表用slotProps

个人觉得这个案例比较能说明为啥要用slotProps

插槽 prop 允许我们将插槽转换为可复用的模板，这些模板可以基于输入的 prop 渲染出不同的内容。这在设计封装数据逻辑同时允许父级组件自定义部分布局的可复用组件时是最有用的。


页面效果如下：

render函数中的slot

1. 先封装组件cusNode如下：
   
2. render函数中调用组件：
   
3. 将上面的两个文件放一起截图看下关系：
   
4. 渲染函数&jsx相关知识点另行总结…

vue实例方法 $slot & $scopedSlots

1. 包含slot插槽的组件
   
2. 调用组件，没有用noScope插槽
   
   打印结果：
   
3. 调用组件，一个noScope,一个default
   
   打印结果：
   

注意：从 2.6.0 开始，这个属性有两个变化：

• 作用域插槽函数现在保证返回一个 VNode 数组，除非在返回值无效的情况下返回 undefined。
• 所有的 $slots 现在都会作为函数暴露在 $scopedSlots 中。如果你在使用渲染函数，不论当前插槽是否带有作用域，我们都推荐始终通过 $scopedSlots 访问它们。这不仅仅使得在未来添加作用域变得简单，也可以让你最终轻松迁移到所有插槽都是函数的 Vue 3。

官网说：vm.$scopedSlots 在使用渲染函数开发一个组件时特别有用