Vue 3.0 Slot統(tǒng)一

#概覽

此更改統(tǒng)一了 3.x 中的普通 slot 和作用域 slot。

以下是變化的變更總結：

• this.$slots 現(xiàn)在將 slots 作為函數(shù)公開
• 非兼容：移除 this.$scopedSlots

更多信息，請繼續(xù)閱讀！

#2.x 語法

當使用渲染函數(shù)時，即 h，2.x 用于在內容節(jié)點上定義 slot data property。

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

此外，在引用作用域 slot 時，可以使用以下方法引用它們：

// 2.x 語法
this.$scopedSlots.header

#3.x 語法

在 3.x 中，插槽被定義為當前節(jié)點的子對象：

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

當你需要以編程方式引用作用域 slot 時，它們現(xiàn)在被統(tǒng)一到 $slots 選項中。

// 2.x 語法
this.$scopedSlots.header


// 3.x 語法
this.$slots.header

#遷移策略

大部分更改已經(jīng)在 2.6 中發(fā)布。因此，遷移可以一步到位：

1. 在 3.x 中，將所有 this.$scopedSlots 替換為 this.$slots。