# スロットの統合
breaking

# 概要

この変更により、3.x の通常のスロットとスコープ付きスロットが統合されます。

変更点の概要は次のとおりです:

  • this.$slots はスロットを関数として公開するようになりました
  • 破壊的変更: this.$scopedSlots が削除されました

詳細については、以下をお読みください!

# 2.x での構文

render 関数を使用する場合、つまり、h は、2.x ではコンテンツノードの slot データプロパティを定義するために使用されます。

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

さらに、スコープ付きスロットを参照する場合、次の構文を使用して参照できます:

// 2.x での構文
this.$scopedSlots.header
1
2

# 3.x での構文

3.x では、スロットはオブジェクトとしての現在のノードの子として定義されています:

// 3.x での構文
h(LayoutComponent, {}, {
  header: () => h('div', this.header),
  content: () => h('div', this.content)
})
1
2
3
4
5

また、スコープ付きスロットをプログラムで参照する必要がある場合、それらは $slots オプションに統合されるようになりました。

// 2.x での構文
this.$scopedSlots.header

// 3.x での構文
this.$slots.header()
1
2
3
4
5

# 移行の戦略

変更の大部分はすでに 2.6 で行われています。その結果、移行は 1 つのステップで実行できます:

  1. 3.x の this.$scopedSlots の出現箇所をすべて this.$slots に置き換えます。
  2. this.$slots.mySlot のすべての出現箇所を this.$slots.mySlot() に置き換えます。

移行ビルドのフラグ: INSTANCE_SCOPED_SLOTS

Deployed on Netlify.
最終更新日: 2021-06-19, 04:36:37 UTC