This change unifies normal and scoped slots in 3.x.
Here is a quick summary of what has changed:
this.$slots
now exposes slots as functionsthis.$scopedSlots
is removedFor more information, read on!
When using the render function, i.e., h
, 2.x used to define the slot
data property on the content nodes.
// 2.x Syntax h(LayoutComponent, [ h('div', { slot: 'header' }, this.header), h('div', { slot: 'content' }, this.content) ])
In addition, when referencing scoped slots, they could be referenced using the following syntax:
// 2.x Syntax this.$scopedSlots.header
In 3.x, slots are defined as children of the current node as an object:
// 3.x Syntax h(LayoutComponent, {}, { header: () => h('div', this.header), content: () => h('div', this.content) })
And when you need to reference scoped slots programmatically, they are now unified into the $slots
option.
// 2.x Syntax this.$scopedSlots.header // 3.x Syntax this.$slots.header()
A majority of the change has already been shipped in 2.6. As a result, the migration can happen in one step:
this.$scopedSlots
occurrences with this.$slots
in 3.x.this.$slots.mySlot
with this.$slots.mySlot()
© 2013–present Yuxi Evan You
Licensed under the MIT License.
https://v3.vuejs.org/guide/migration/slots-unification.html