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

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

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

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

什么是插槽slot?

【vue学习】slot
假设上面定义的组件名为custDemo,下图是调用过程
【vue学习】slot
说起来,这叫内容分发:Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 Web Components 规范草案,将 元素作为承载分发内容的出口。

什么是作用域插槽slot-scope

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

为啥要有这个slot-scope呢?

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

v-slot写法

上述的案例改成v-slot指令的写法(v-slot简写为#也可):
【vue学习】slot
有啥区别呢?

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

官网中有个ul列表用slotProps

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

插槽 prop 允许我们将插槽转换为可复用的模板,这些模板可以基于输入的 prop 渲染出不同的内容。这在设计封装数据逻辑同时允许父级组件自定义部分布局的可复用组件时是最有用的。
【vue学习】slot
【vue学习】slot
页面效果如下:
【vue学习】slot

render函数中的slot

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

相关文章:

  • 2022-12-23
  • 2021-12-11
  • 2021-05-05
  • 2021-04-21
  • 2022-12-23
  • 2022-01-24
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2021-07-02
  • 2018-05-04
  • 2021-10-24
  • 2022-12-23
  • 2020-03-19
相关资源
相似解决方案