@@ -3,63 +3,68 @@ badges:
3
3
- breaking
4
4
---
5
5
6
- # Slots Unification <MigrationBadges :badges =" $frontmatter.badges " />
6
+ # スロットの統合 <MigrationBadges :badges =" $frontmatter.badges " />
7
7
8
- ## Overview
8
+ ## 概要
9
9
10
- This change unifies normal and scoped slots in 3.x.
10
+ この変更により、 3.x の通常のスロットとスコープ付きスロットが統合されます。
11
11
12
- Here is a quick summary of what has changed :
12
+ 変更点の概要は次のとおりです :
13
13
14
- - ` this.$slots ` now exposes slots as functions
15
- - ** BREAKING ** : ` this.$scopedSlots ` is removed
14
+ - ` this.$slots ` はスロットを関数として公開するようになりました
15
+ - ** 速報 ** : ` this.$scopedSlots ` が削除されました
16
16
17
- For more information, read on !
17
+ 詳細については、以下をお読みください !
18
18
19
- ## 2.x Syntax
19
+ ## 2.x 構文
20
20
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 ` データプロパティを定義するために使用されます。
22
22
23
23
``` js
24
- // 2.x Syntax
24
+ // 2.x 構文
25
+
25
26
h (LayoutComponent, [
26
27
h (' div' , { slot: ' header' }, this .header ),
27
28
h (' div' , { slot: ' content' }, this .content )
28
29
])
29
30
```
30
31
31
- In addition, when referencing scoped slots, they could be referenced using the following syntax :
32
+ さらに、スコープ付きスロットを参照する場合、次の構文を使用して参照できます :
32
33
33
34
``` js
34
- // 2.x Syntax
35
+ // 2.x 構文
36
+
35
37
this .$scopedSlots .header
36
38
```
37
39
38
- ## 3.x Syntax
40
+ ## 3.x 構文
39
41
40
- In 3.x, slots are defined as children of the current node as an object :
42
+ 3.x では、スロットはオブジェクトとしての現在のノードの子として定義されています :
41
43
42
44
``` js
43
- // 3.x Syntax
45
+ // 3.x 構文
46
+
44
47
h (LayoutComponent, {}, {
45
48
header : () => h (' div' , this .header ),
46
49
content : () => h (' div' , this .content )
47
50
})
48
51
```
49
52
50
- And when you need to reference scoped slots programmatically, they are now unified into the ` $slots ` option.
53
+ また、スコープ付きスロットをプログラムで参照する必要がある場合、それらは ` $slots ` オプションに統合されるようになりました。
51
54
52
55
``` js
53
- // 2.x Syntax
56
+ // 2.x 構文
57
+
54
58
this .$scopedSlots .header
55
59
56
- // 3.x Syntax
60
+ // 3.x 構文
61
+
57
62
this .$slots .header ()
58
63
```
59
64
60
- ## Migration Strategy
65
+ ## 移行戦略
61
66
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つのステップで実行できます :
63
68
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