
在
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,下图是调用过程

什么是作用域插槽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简写为#也可):

template处不能用其他标签替换,slot=""时既可以是template,也可以是普通标签。v-slot:default="slotProps"v-slot:stl="slotProps"这里的default也都带着吧;只有匿名的时候可以不带,但是如果用#缩写那必须都要。3.0后原来的slot和slot-scope写法将会被完全废弃。当然如果你的项目中的vue是2.6.0之前的版本,v-slot也不能用。- 注意:要修改
vue版本的话,对应vue-template-compiler的版本不要忘记修改。
官网中有个ul列表用slotProps
个人觉得这个案例比较能说明为啥要用slotProps
插槽 prop 允许我们将插槽转换为可复用的模板,这些模板可以基于输入的 prop 渲染出不同的内容。这在设计封装数据逻辑同时允许父级组件自定义部分布局的可复用组件时是最有用的。



render函数中的slot
- 先封装组件
cusNode如下:
- render函数中调用组件:

- 将上面的两个文件放一起截图看下关系:

- 渲染函数&jsx相关知识点另行总结......
vue实例方法 $slot & $scopedSlots
- 包含
slot插槽的组件
- 调用组件,没有用
noScope插槽 打印结果:

- 调用组件,一个
noScope,一个default 打印结果:

注意:从 2.6.0 开始,这个属性有两个变化:
- 作用域插槽函数现在保证返回一个
VNode数组,除非在返回值无效的情况下返回undefined。 - 所有的
$slots现在都会作为函数暴露在$scopedSlots中。如果你在使用渲染函数,不论当前插槽是否带有作用域,我们都推荐始终通过$scopedSlots访问它们。这不仅仅使得在未来添加作用域变得简单,也可以让你最终轻松迁移到所有插槽都是函数的Vue 3。
官网说:
vm.$scopedSlots在使用渲染函数开发一个组件时特别有用
