File tree Expand file tree Collapse file tree 1 file changed +3
-8
lines changed Expand file tree Collapse file tree 1 file changed +3
-8
lines changed Original file line number Diff line number Diff line change 4
4
5
5
[ provide / inject] ( component-provide-inject.html ) は コンポジション API でも使うことができます。どちらも現在アクティブなインスタンスの [ ` setup() ` ] ( composition-api-setup.html ) 中にのみ呼び出すことが可能です。
6
6
7
-
8
7
## シナリオの背景
9
8
10
- これから、コンポジション API を使用して、以下のコードを書き直そうとしているとしましょう。
11
- 以下のコードでは、` MyMap ` コンポーネントが ` MyMaker ` コンポーネントにユーザの位置情報を提供しています。
9
+ これから、コンポジション API を使用して、以下のコードを書き直そうとしているとしましょう。以下のコードでは、` MyMap ` コンポーネントが ` MyMaker ` コンポーネントにユーザの位置情報を提供しています。
12
10
13
11
``` vue
14
12
<!-- src/components/MyMap.vue -->
@@ -45,8 +43,7 @@ export default {
45
43
46
44
## Provide の使い方
47
45
48
- ` setup() ` 内で ` provide ` を使う場合、始めに ` vue ` から明示的に ` provide ` をインポートします。
49
- これにより、 各プロパティについて ` provide ` の呼び出しで定義することができるようになります。
46
+ ` provide ` を ` setup() ` 内で使う場合、始めに ` vue ` から明示的に ` provide ` をインポートします。これにより、 各プロパティについて ` provide ` の呼び出しで定義することができるようになります。
50
47
51
48
` provide ` 関数は2つの引数によってプロパティを定義できます:
52
49
@@ -82,8 +79,7 @@ export default {
82
79
83
80
## Inject の使い方
84
81
85
- 同様に ` setup() ` 内 ` inject ` を使う場合も ` vue ` から明示的に ` inject ` をインポートする必要があります。
86
- そうしておけば、これを呼び出すことで、注入された値をコンポーネントに公開する方法を定義することができるようになります。
82
+ ` inject ` を ` setup() ` 内で使う場合も、` vue ` から明示的に ` inject ` をインポートする必要があります。そうしておけば、これを呼び出すことで、注入された値をコンポーネントに公開する方法を定義することができるようになります。
87
83
88
84
` inject ` 関数は2つの引数をとります:
89
85
@@ -92,7 +88,6 @@ export default {
92
88
93
89
` MyMaker ` コンポーネントは、以下のようにリファクタリングすることができます:
94
90
95
-
96
91
``` vue{3,6-14}
97
92
<!-- src/components/MyMarker.vue -->
98
93
<script>
You can’t perform that action at this time.
0 commit comments