1
1
# セットアップ
2
2
3
- > このセクションではコード例に[ 単一ファイルコンポーネント] ( single-file-component.html ) のシンタックスを使います 。
3
+ > このセクションではコード例に[ 単一ファイルコンポーネント] ( single-file-component.html ) の構文を使います 。
4
4
5
- > このガイドは[ コンポジション API の導入] ( composition-api-introduction.html ) と[ リアクティブの基礎] ( reactivity-fundamentals.html ) を既に読んでいることを想定しています。 コンポジション API に初めて触れる方は、まずそちらを読んでみてください。
5
+ > このガイドは[ Composition API の導入] ( composition-api-introduction.html ) と[ リアクティブの基礎] ( reactivity-fundamentals.html ) を既に読んでいることを想定しています。 Composition API に初めて触れる方は、まずそちらを読んでみてください。
6
6
7
7
## 引数
8
8
9
- ` setup ` 関数を使う時、2 つの引数を取ります :
9
+ ` setup ` 関数を使う時、2つの引数を取ります :
10
10
11
11
1 . ` props `
12
12
2 . ` context `
15
15
16
16
### プロパティ
17
17
18
- ` setup ` 関数の 第一引数は ` props ` 引数です。 標準コンポーネントで期待するように、` setup ` 関数内の ` props ` はリアクティブで、新しい props が渡されたら更新されます。
18
+ ` setup ` 関数の第1引数は ` props ` 引数です。 標準コンポーネントで期待するように、` setup ` 関数内の ` props ` はリアクティブで、新しい props が渡されたら更新されます。
19
19
20
20
``` js
21
21
// MyBook.vue
@@ -34,7 +34,7 @@ export default {
34
34
しかし、` props ` はリアクティブなので、** ES6 の分割代入を使うことができません。** props のリアクティブを削除してしまうからです。
35
35
:::
36
36
37
- もし、props を分割代入する必要がある場合は、` setup ` 関数内で [ toRefs] ( reactivity-fundamentals.html#destructuring-reactive-state ) を使うことによって安全に分割代入を行うことができます。
37
+ もし、props を分割代入する必要がある場合は、` setup ` 関数内で [ toRefs] ( reactivity-fundamentals.html#リアクティブな状態の分割代入 ) を使うことによって分割代入を行うことができます:
38
38
39
39
``` js
40
40
// MyBook.vue
@@ -48,9 +48,23 @@ setup(props) {
48
48
}
49
49
```
50
50
51
+ ` title ` オプションのプロパティである場合、 ` props ` から抜けている可能性があります。その場合、 ` toRefs ` では ` title ` の ref はつくられません。代わりに ` toRef ` を使う必要があります:
52
+
53
+ ``` js
54
+ // MyBook.vue
55
+
56
+ import { toRef } from ' vue'
57
+
58
+ setup (props ) {
59
+ const title = toRef (props, ' title' )
60
+
61
+ console .log (title .value )
62
+ }
63
+ ```
64
+
51
65
### コンテキスト
52
66
53
- ` setup ` 関数に渡される第二引数は ` context ` です。` context ` は 3 つのコンポーネントプロパティを公開する一般的な JavaScript オブジェクトです。:
67
+ ` setup ` 関数に渡される第2引数は ` context ` です。` context ` は3つのコンポーネントプロパティを公開する一般的な JavaScript オブジェクトです。:
54
68
55
69
``` js
56
70
// MyBook.vue
@@ -69,7 +83,7 @@ export default {
69
83
}
70
84
```
71
85
72
- ` context ` オブジェクトは一般的な JavaScript オブジェクトです。 すなわち、リアクティブではありません。これは ` context ` で ES6 分割代入を安全に使用できることを意味します。
86
+ ` context ` オブジェクトは一般的な JavaScript オブジェクトです。すなわち、リアクティブではありません。これは ` context ` で ES6 分割代入を安全に使用できることを意味します。
73
87
74
88
``` js
75
89
// MyBook.vue
@@ -84,34 +98,37 @@ export default {
84
98
85
99
## コンポーネントプロパティへのアクセス
86
100
87
- ` setup ` が実行されるとき、 コンポーネントインスタンスはまだ作成されていません。そのため、以下のプロパティにのみアクセスすることができます。 :
101
+ ` setup ` が実行されるとき、 コンポーネントインスタンスはまだ作成されていません。そのため、以下のプロパティにのみアクセスすることができます:
88
102
89
103
- ` props `
90
104
- ` attrs `
91
105
- ` slots `
92
106
- ` emit `
93
107
94
- 言い換えると、以下のコンポーネントオプションには** アクセスできません** 。 :
108
+ 言い換えると、以下のコンポーネントオプションには** アクセスできません** :
95
109
96
110
- ` data `
97
111
- ` computed `
98
112
- ` methods `
99
113
100
114
## テンプレートでの使用
101
115
102
- ` setup ` がオブジェクトを返す場合、コンポーネントのテンプレート内でオブジェクトのプロパティにアクセスすることができます。 :
116
+ ` setup ` がオブジェクトを返す場合、コンポーネントのテンプレート内でオブジェクトのプロパティにアクセスすることができ、 ` setup ` に渡された ` props ` のプロパティも同じようにアクセスできます :
103
117
104
118
``` vue-html
105
119
<!-- MyBook.vue -->
106
120
<template>
107
- <div>{{ readersNumber }} {{ book.title }}</div>
121
+ <div>{{ collectionName }}: {{ readersNumber }} {{ book.title }}</div>
108
122
</template>
109
123
110
124
<script>
111
125
import { ref, reactive } from 'vue'
112
126
113
127
export default {
114
- setup() {
128
+ props: {
129
+ collectionName: String
130
+ },
131
+ setup(props) {
115
132
const readersNumber = ref(0)
116
133
const book = reactive({ title: 'Vue 3 Guide' })
117
134
@@ -125,11 +142,11 @@ export default {
125
142
</script>
126
143
```
127
144
128
- ` setup ` から返された [ refs] ( ../api/refs-api.html#ref ) は、テンプレート内でアクセスされたときに[ 自動的にアンラップ ] ( ../api/refs-api .html#access-in-templates ) されるので、テンプレート内で ` .value ` を使用すべきではないことに注意してください。
145
+ ` setup ` から返された [ refs] ( ../api/refs-api.html#ref ) は、テンプレート内でアクセスされたときに[ 自動的に浅いアンラップ ] ( /guide/reactivity-fundamentals .html#ref-のアンラップ ) されるので、テンプレート内で ` .value ` を使用すべきではないことに注意してください。
129
146
130
- ## 描画関数での使用
147
+ ## レンダリング関数での使用
131
148
132
- ` setup ` は同じスコープで宣言されたリアクティブなステートを直接利用することができる描画関数を返すこともできます。 :
149
+ ` setup ` は同じスコープで宣言されたリアクティブなステートを直接利用することができるレンダリング関数を返すこともできます :
133
150
134
151
``` js
135
152
// MyBook.vue
0 commit comments