Уніфікація слотів

несумісно

#

Огляд #

Ця зміна уніфікує звичайні та обмежені слоти в 3.x.

Ось короткий огляд того, що змінилося:

• this.$slots тепер відкриває слоти як функції
• НЕСУМІСНО: this.$scopedSlots видалено

Щоб дізнатися більше, читайте далі!

2.x Синтаксис #

When using the render function, i.e., h, 2.x used to define the slot data property on the content nodes. При використанні функції render, тобто h, у версії 2.x потрібно було вказувати властивість slot на вузлах контенту.

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

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

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

3.x Синтаксис #

У версії 3.x слоти визначаються як дочірні об'єкти поточного вузла:

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

А якщо вам потрібно програмно звернутися до обмежених слотів, то їх тепер об'єднано в опцію $slots.

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

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

Стратегія міграції #

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

1. Замінити всі випадки this.$scopedSlots на this.$slots для версії 3.x.
2. Замінити всі випадки this.$slots.mySlot на this.$slots.mySlot().

Прапор збірки міграції: INSTANCE_SCOPED_SLOTS