开篇
今天来说下Vue中的Slot,Vue中Slot的灵感来自于 Web Components ,2.6版本更新了Vue中的Slot,今天就从新老两个版本来具体说下Vue中的插槽(以下称为slot)的具体变化
旧版本
旧版本中的slot由两个属性构成 slot 和 slot-scoped,话不多说直接上代码
这是children.vue的代码
这是father.vue的代码
由图可得,2.6版本前的slot属性用于指定对应的具名插槽,slot-scoped属性用来传递slot元素绑定的属性
(在2.6版本后被弃用,2.x版本依然支持但3.x版本将被废弃)
新版本
新的版本中使用v-slot命令来代替slot和slot-scoped,talk is useless show you the code
新版本的children.vue依旧不变
新版本的fater.vue如下
由图可得,在2.6版本后,v-slot指令代替了slot,然后用v-slot指令后的属性来指定具名slot的name值,slot-scoped被v-slot:(插槽名字)后定义的参数所替代。
tips:
1:当使用匿名插槽时,v-slot可以选择后面不带上插槽名,或者默认插槽名default
2:v-slot只可以使用在template元素上,除了以下的特殊情况 一种例外情况
如有理解不准之处,欢迎大家指正