From 9eb594e631a4ae1ae489a48a4aec257760f818b1 Mon Sep 17 00:00:00 2001 From: KatakuraNatsumi Date: Sun, 25 Oct 2020 23:04:35 +0900 Subject: [PATCH 1/3] Translate: Migration Guide > Slots Unification --- src/guide/migration/slots-unification.md | 49 +++++++++++++----------- 1 file changed, 27 insertions(+), 22 deletions(-) diff --git a/src/guide/migration/slots-unification.md b/src/guide/migration/slots-unification.md index 2faa7251..4d6f73b7 100644 --- a/src/guide/migration/slots-unification.md +++ b/src/guide/migration/slots-unification.md @@ -3,63 +3,68 @@ badges: - breaking --- -# Slots Unification +# スロットの統合 -## Overview +## 概要 -This change unifies normal and scoped slots in 3.x. +この変更により、3.x の通常のスロットとスコープ付きスロットが統合されます。 -Here is a quick summary of what has changed: +変更点の概要は次のとおりです: -- `this.$slots` now exposes slots as functions -- **BREAKING**: `this.$scopedSlots` is removed +- `this.$slots` はスロットを関数として公開するようになりました +- **速報**: `this.$scopedSlots` が削除されました -For more information, read on! +詳細については、以下をお読みください! -## 2.x Syntax +## 2.x 構文 -When using the render function, i.e., `h`, 2.x used to define the `slot` data property on the content nodes. +render関数を使用する場合、つまり、`h` は、2.x ではコンテンツノードの `slot` データプロパティを定義するために使用されます。 ```js -// 2.x Syntax +// 2.x 構文 + h(LayoutComponent, [ h('div', { slot: 'header' }, this.header), h('div', { slot: 'content' }, this.content) ]) ``` -In addition, when referencing scoped slots, they could be referenced using the following syntax: +さらに、スコープ付きスロットを参照する場合、次の構文を使用して参照できます: ```js -// 2.x Syntax +// 2.x 構文 + this.$scopedSlots.header ``` -## 3.x Syntax +## 3.x 構文 -In 3.x, slots are defined as children of the current node as an object: +3.x では、スロットはオブジェクトとしての現在のノードの子として定義されています: ```js -// 3.x Syntax +// 3.x 構文 + h(LayoutComponent, {}, { header: () => h('div', this.header), content: () => h('div', this.content) }) ``` -And when you need to reference scoped slots programmatically, they are now unified into the `$slots` option. +また、スコープ付きスロットをプログラムで参照する必要がある場合、それらは `$slots` オプションに統合されるようになりました。 ```js -// 2.x Syntax +// 2.x 構文 + this.$scopedSlots.header -// 3.x Syntax +// 3.x 構文 + this.$slots.header() ``` -## Migration Strategy +## 移行戦略 -A majority of the change has already been shipped in 2.6. As a result, the migration can happen in one step: +変更の大部分はすでに 2.6 で行われています。その結果、移行は1つのステップで実行できます: -1. Replace all `this.$scopedSlots` occurrences with `this.$slots` in 3.x. -2. Replace all occurences of `this.$slots.mySlot` with `this.$slots.mySlot()` +1. 3.x の `this.$scopedSlots` の出現箇所をすべて `this.$slots` に置き換えます。 +2. `this.$slots.mySlot` のすべての出現箇所を `this.$slots.mySlot()` に置き換えます。 From 25e5a054743d744ef8741a858b4cd053cd759455 Mon Sep 17 00:00:00 2001 From: KatakuraNatsumi Date: Sun, 25 Oct 2020 23:08:45 +0900 Subject: [PATCH 2/3] Remove unnecessary line breaks --- src/guide/migration/slots-unification.md | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/guide/migration/slots-unification.md b/src/guide/migration/slots-unification.md index 4d6f73b7..43d1bb68 100644 --- a/src/guide/migration/slots-unification.md +++ b/src/guide/migration/slots-unification.md @@ -22,7 +22,6 @@ render関数を使用する場合、つまり、`h` は、2.x ではコンテン ```js // 2.x 構文 - h(LayoutComponent, [ h('div', { slot: 'header' }, this.header), h('div', { slot: 'content' }, this.content) @@ -33,7 +32,6 @@ h(LayoutComponent, [ ```js // 2.x 構文 - this.$scopedSlots.header ``` @@ -43,7 +41,6 @@ this.$scopedSlots.header ```js // 3.x 構文 - h(LayoutComponent, {}, { header: () => h('div', this.header), content: () => h('div', this.content) @@ -54,11 +51,9 @@ h(LayoutComponent, {}, { ```js // 2.x 構文 - this.$scopedSlots.header // 3.x 構文 - this.$slots.header() ``` From 31c41f6352f5552b88a08e5ae7423080b7426f45 Mon Sep 17 00:00:00 2001 From: KatakuraNatsumi Date: Mon, 26 Oct 2020 12:59:21 +0900 Subject: [PATCH 3/3] =?UTF-8?q?Modify=20BREAKING=20translation=20to=20?= =?UTF-8?q?=E3=80=8C=E7=A0=B4=E5=A3=8A=E7=9A=84=E5=A4=89=E6=9B=B4=E3=80=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/guide/migration/slots-unification.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/migration/slots-unification.md b/src/guide/migration/slots-unification.md index 43d1bb68..2b1bb27c 100644 --- a/src/guide/migration/slots-unification.md +++ b/src/guide/migration/slots-unification.md @@ -12,7 +12,7 @@ badges: 変更点の概要は次のとおりです: - `this.$slots` はスロットを関数として公開するようになりました -- **速報**: `this.$scopedSlots` が削除されました +- **破壊的変更**: `this.$scopedSlots` が削除されました 詳細については、以下をお読みください!