Unification des slots

# Unification des slots
breaking

# Vue d'ensemble

Cette modification unifie les slots normaux et les slots scopés dans la version 3.x.

Voici un résumé rapide de ce qui a changé :

this.$slots expose maintenant les slots comme des fonctions.
BREAKING : this.$scopedSlots est supprimé.

Pour plus d'informations, lisez la suite !

# Syntaxe 2.x

Lors de l'utilisation de la fonction de rendu, c'est-à-dire h, 2.x avait l'habitude de définir la propriété de données slot sur les noeuds de contenu.

// 2.x Syntax
h(LayoutComponent, [
  h('div', { slot: 'header' }, this.header),
  h('div', { slot: 'content' }, this.content)
])

1
2
3
4
5

En outre, lorsque l'on fait référence à des créneaux scopés, on peut les référencer en utilisant la syntaxe suivante :

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

1
2

# Syntaxe 3.x

En 3.x, les slots sont définis comme des enfants du noeud courant en tant qu'objet :

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

1
2
3
4
5

Et lorsque vous avez besoin de référencer les slots de manière programmatique, ils sont maintenant unifiés dans l'option $slots.

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

// 3.x Syntax
this.$slots.header()

1
2
3
4
5

# Stratégie de migration

La majorité des changements ont déjà été livrés en 2.6. Par conséquent, la migration peut se faire en une seule étape :

Remplacer toutes les occurrences de this.$scopedSlots par this.$slots en 3.x.
Remplacez toutes les occurrences de this.$slots.mySlot par this.$slots.mySlot().

← API de la fonction de rendu Transition Class Change →