vue插槽-2.6.0前后版本使用对比
vue 2.6.0 中,为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。新语法的由来可查阅这份 RFC。
在接下来所有的 2.x 版本中 slot 和 slot-scope attribute 仍会被支持,但已经被官方废弃且不会出现在 Vue 3 中
本文基于以上背景,研究v-slot和slot 和 slot-scope使用上的区别。
1、代码
slot插槽不同版本使用方式-2.6.0分割
2、界面效果
界面效果
3、使用总结
v-slot:prop 等价于 slot="prop"
v-slot:prop="slotProps" 等价于 slot="prop" slot-scope="slotProps" 就写法上来讲,这样写方便点
v-slot指令只能用在 template或组件中
v-slot指令后面跟prop 若出现多个同类插槽 仅生效最后一个。不添加v-slot指令,都生效(属于默认插槽 )
2.6.0之前的版本 插槽 可以出现多个同类的插槽。插槽可以在component、template、dom使用
如果在dom元素里使用指令prop最好使用kebab-case,大小写识别不出(v-slot识别不了,slot没有影响)
官方文档
-插槽的使用
content1
main1
content2
main2
{{date}}
-插槽的使用
content1
main1
content2
main2
{{date}}
发表评论 (审核通过后显示评论):