# Выполнена унификация слотов
breaking

# Обзор

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

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

  • this.$slots теперь выставляет слоты как функции
  • КАРДИНАЛЬНОЕ ИЗМЕНЕНИЕ: this.$scopedSlots удалено

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

# Синтаксис в 2.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 слоты определяются в качестве объекта как дочерние элементы текущего узла:

// Синтаксис в 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, поэтому миграцию можно выполнить в два шага:

  1. Заменить все использования this.$scopedSlots на this.$slots для версий 3.x.
  2. Заменить все использования this.$slots.mySlot на this.$slots.mySlot()

Deployed on Netlify.
Последнее обновление: 2021-01-03, 12:00:51 UTC