# Unificação de Slots
breaking

# Visão Geral

Esta modificação unifica slots normais e slots com escopo na v3.x.

Aqui um pequeno sumário sobre o que mudou:

  • this.$slots agora exibe os slots como funções
  • QUEBRA: this.$scopedSlots foi removido

Para mais informações, continue lendo!

# Sintaxe v2.x

Ao utilizar uma função de renderização, como h, a v2.x definia a propriedade slot nos nós do conteúdo.

// Sintaxe v2.x
h(LayoutComponent, [
  h('div', { slot: 'header' }, this.header),
  h('div', { slot: 'content' }, this.content)
])
1
2
3
4
5

Além disso, ao referenciar slots com escopo definido, eles poderiam ser referenciados usando a seguinte sintaxe:

// Sintaxe v2.x
this.$scopedSlots.header
1
2

# Sintaxe v3.x

Na v3.x, os slots são definidos como um objeto, filhos do nó atual:

// Sintaxe v3.x
h(LayoutComponent, {}, {
  header: () => h('div', this.header),
  content: () => h('div', this.content)
})
1
2
3
4
5

E quando você precisar referenciar slots com escopo programaticamente, estes agora estão unificados na opção $slots.

// Sintaxe v2.x
this.$scopedSlots.header

// Sintaxe v3.x
this.$slots.header()
1
2
3
4
5

# Estratégia de Migração

A maioria das alterações já estão presentes na versão 2.6. Desta forma, a migração pode acontecer em uma etapa:

  1. Susbstitua todas as ocorrências de this.$scopedSlots por this.$slots na v3.x.
  2. Susbstitua todas as ocorrências de this.$slots.mySlot por this.$slots.mySlot().

Migration build flag: INSTANCE_SCOPED_SLOTS