スロットの統一
破壊的変更

概要

3.x では、通常のスロットとスコープ付きスロットが統合されます。

以下は、変更点の簡単なまとめです:

詳細については続きをお読みください！

2.x では、h のようなレンダー関数を使用する場合、コンテンツノードに 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 の構文
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 つのステップで行うことができます: