# 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:

Para mais informações, continue lendo!

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

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

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

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