Skip to content

Commit 9eb594e

Browse files
Translate: Migration Guide > Slots Unification
1 parent 5821c03 commit 9eb594e

File tree

1 file changed

+27
-22
lines changed

1 file changed

+27
-22
lines changed

src/guide/migration/slots-unification.md

Lines changed: 27 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,63 +3,68 @@ badges:
33
- breaking
44
---
55

6-
# Slots Unification <MigrationBadges :badges="$frontmatter.badges" />
6+
# スロットの統合 <MigrationBadges :badges="$frontmatter.badges" />
77

8-
## Overview
8+
## 概要
99

10-
This change unifies normal and scoped slots in 3.x.
10+
この変更により、3.x の通常のスロットとスコープ付きスロットが統合されます。
1111

12-
Here is a quick summary of what has changed:
12+
変更点の概要は次のとおりです:
1313

14-
- `this.$slots` now exposes slots as functions
15-
- **BREAKING**: `this.$scopedSlots` is removed
14+
- `this.$slots` はスロットを関数として公開するようになりました
15+
- **速報**: `this.$scopedSlots` が削除されました
1616

17-
For more information, read on!
17+
詳細については、以下をお読みください!
1818

19-
## 2.x Syntax
19+
## 2.x 構文
2020

21-
When using the render function, i.e., `h`, 2.x used to define the `slot` data property on the content nodes.
21+
render関数を使用する場合、つまり、`h` は、2.x ではコンテンツノードの `slot` データプロパティを定義するために使用されます。
2222

2323
```js
24-
// 2.x Syntax
24+
// 2.x 構文
25+
2526
h(LayoutComponent, [
2627
h('div', { slot: 'header' }, this.header),
2728
h('div', { slot: 'content' }, this.content)
2829
])
2930
```
3031

31-
In addition, when referencing scoped slots, they could be referenced using the following syntax:
32+
さらに、スコープ付きスロットを参照する場合、次の構文を使用して参照できます:
3233

3334
```js
34-
// 2.x Syntax
35+
// 2.x 構文
36+
3537
this.$scopedSlots.header
3638
```
3739

38-
## 3.x Syntax
40+
## 3.x 構文
3941

40-
In 3.x, slots are defined as children of the current node as an object:
42+
3.x では、スロットはオブジェクトとしての現在のノードの子として定義されています:
4143

4244
```js
43-
// 3.x Syntax
45+
// 3.x 構文
46+
4447
h(LayoutComponent, {}, {
4548
header: () => h('div', this.header),
4649
content: () => h('div', this.content)
4750
})
4851
```
4952

50-
And when you need to reference scoped slots programmatically, they are now unified into the `$slots` option.
53+
また、スコープ付きスロットをプログラムで参照する必要がある場合、それらは `$slots` オプションに統合されるようになりました。
5154

5255
```js
53-
// 2.x Syntax
56+
// 2.x 構文
57+
5458
this.$scopedSlots.header
5559

56-
// 3.x Syntax
60+
// 3.x 構文
61+
5762
this.$slots.header()
5863
```
5964

60-
## Migration Strategy
65+
## 移行戦略
6166

62-
A majority of the change has already been shipped in 2.6. As a result, the migration can happen in one step:
67+
変更の大部分はすでに 2.6 で行われています。その結果、移行は1つのステップで実行できます:
6368

64-
1. Replace all `this.$scopedSlots` occurrences with `this.$slots` in 3.x.
65-
2. Replace all occurences of `this.$slots.mySlot` with `this.$slots.mySlot()`
69+
1. 3.x の `this.$scopedSlots` の出現箇所をすべて `this.$slots` に置き換えます。
70+
2. `this.$slots.mySlot` のすべての出現箇所を `this.$slots.mySlot()` に置き換えます。

0 commit comments

Comments
 (0)