# Выполнена унификация слотов
кардинальное изменение

# Обзор

Изменение унифицирует обычные и слоты с ограниченной областью видимости в 3.x.

Краткое описание изменений:

Для получения дополнительной информации читайте дальше!

Когда используется render-функция, т.е. h, в версии 2.x требуется определять свойство slot на соответствующих узлах содержимого.

// Синтаксис в 2.x
h(LayoutComponent, [
  h('div', { slot: 'header' }, this.header),
  h('div', { slot: 'content' }, this.content)
])

1
2
3
4
5

Кроме того, для обращения к слотам с ограниченной областью видимости можно использовать следующий синтаксис:

// Синтаксис в 2.x
this.$scopedSlots.header

1
2

В 3.x слоты определяются в качестве объекта, как дочерние элементы текущего узла:

// Синтаксис в 3.x
h(LayoutComponent, {}, {
  header: () => h('div', this.header),
  content: () => h('div', this.content)
})

1
2
3
4
5

Теперь, когда потребуется программно обратиться к слоту с ограниченной областью видимости, он будет доступен через $slots.

// Синтаксис в 2.x
this.$scopedSlots.header

// Синтаксис в 3.x
this.$slots.header()

1
2
3
4
5

Большая часть изменений уже опубликована в версии 2.6, поэтому для миграции нужно выполнить два шага: