# Выполнена унификация слотов
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
3
4
5
Кроме того, для обращения к слотам с ограниченной областью видимости можно использовать следующий синтаксис:
// Синтаксис в 2.x
this.$scopedSlots.header
1
2
2
# Синтаксис в 3.x
В 3.x слоты определяются в качестве объекта как дочерние элементы текущего узла:
// Синтаксис в 3.x
h(LayoutComponent, {}, {
header: () => h('div', this.header),
content: () => h('div', this.content)
})
1
2
3
4
5
2
3
4
5
Теперь, когда потребуется программно сослаться на слот с ограниченной областью видимости, он будет доступен через $slots
.
// Синтаксис в 2.x
this.$scopedSlots.header
// Синтаксис в 3.x
this.$slots.header()
1
2
3
4
5
2
3
4
5
# Стратегия миграции
Большая часть изменений уже опубликована в версии 2.6, поэтому миграцию можно выполнить в два шага:
- Заменить все использования
this.$scopedSlots
наthis.$slots
для версий 3.x. - Заменить все использования
this.$slots.mySlot
наthis.$slots.mySlot()