# Slots Unification

# Overview

This change unifies normal and scoped slots in 3.x.

Here is a quick summary of what has changed:

For 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)
])

1
2
3
4
5

In addition, when referencing scoped slots, they could be referenced using the following syntax:

// 2.x Syntax
this.$scopedSlots.header

1
2

In 3.x, render functions will have a slots option where they can be defined instead.

// 3.x Syntax
h(LayoutComponent, {
  slots: {
    header: () => h('div', this.header),
    content: () => h('div', this.content)
  }
})

1
2
3
4
5
6
7

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

1
2
3
4
5

A majority of the change has already been shipped in 2.6. As a result, the migration can happen in one step: