You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/guide/composition-api-provide-inject.md
+26-26Lines changed: 26 additions & 26 deletions
Original file line number
Diff line number
Diff line change
@@ -1,12 +1,12 @@
1
1
# Provide / Inject
2
2
3
-
> This guide assumes that you have already read [Provide / Inject](component-provide-inject.html), [Composition API Introduction](composition-api-introduction.html), and [Reactivity Fundamentals](reactivity-fundamentals.html).
3
+
> このページは、すでに [Provide / Inject](component-provide-inject.html)、[コンポジション API 導入](composition-api-introduction.html)、[リアクティブの基礎](reactivity-fundamentals.html)を読み終えていることを想定しています。
4
4
5
-
We can use [provide / inject](component-provide-inject.html)with the Composition API as well. Both can only be called during [`setup()`](composition-api-setup.html)with a current active instance.
5
+
[provide / inject](component-provide-inject.html)は コンポジション API でも使うことができます。どちらも現在アクティブなインスタンスの [`setup()`](composition-api-setup.html)中にのみ呼び出すことが可能です。
6
6
7
-
## Scenario Background
7
+
## シナリオの背景
8
8
9
-
Let's assume that we want to rewrite the following code, which contains a `MyMap`component that provides a `MyMarker` component with the user's location, using the Composition API.
9
+
これから、コンポジション API を使用して、以下のコードを書き直そうとしているとしましょう。以下のコードでは、`MyMap`コンポーネントが `MyMaker` コンポーネントにユーザの位置情報を提供しています。
10
10
11
11
```vue
12
12
<!-- src/components/MyMap.vue -->
@@ -41,16 +41,16 @@ export default {
41
41
</script>
42
42
```
43
43
44
-
## Using Provide
44
+
## Provide の使い方
45
45
46
-
When using `provide`in`setup()`, we start by explicitly importing the method from `vue`. This allows us to define each property with its own invocation of `provide`.
The `provide`function allows you to define the property through two parameters:
48
+
`provide`関数は2つの引数によってプロパティを定義できます:
49
49
50
-
1.The property's name (`<String>`type)
51
-
2.The property's value
50
+
1.プロパティの名前 (`<String>`型)
51
+
2.プロパティの値
52
52
53
-
Using our `MyMap`component, our provided values can be refactored as the following:
53
+
`MyMap`コンポーネントは、以下のようにリファクタリングすることができます:
54
54
55
55
```vue{7,14-20}
56
56
<!-- src/components/MyMap.vue -->
@@ -77,16 +77,16 @@ export default {
77
77
</script>
78
78
```
79
79
80
-
## Using Inject
80
+
## Inject の使い方
81
81
82
-
When using `inject`in`setup()`, we also need to explicitly import it from `vue`. Once we do so, this allows us to invoke it to define how we want to expose it to our component.
Using our `MyMarker` component, we can refactor it with the following code:
89
+
`MyMaker` コンポーネントは、以下のようにリファクタリングすることができます:
90
90
91
91
```vue{3,6-14}
92
92
<!-- src/components/MyMarker.vue -->
@@ -107,13 +107,13 @@ export default {
107
107
</script>
108
108
```
109
109
110
-
## Reactivity
110
+
## リアクティブ
111
111
112
-
### Adding Reactivity
112
+
### リアクティブの追加
113
113
114
-
To add reactivity between provided and injected values, we can use a [ref](reactivity-fundamentals.html#creating-standalone-reactive-values-as-refs)or[reactive](reactivity-fundamentals.html#declaring-reactive-state)when providing a value.
When using reactive provide / inject values, **it is recommended to keep any mutations to reactive properties inside of the _provider_ whenever possible**.
150
+
リアクティブな provide / inject の値を使う場合、**リアクティブなプロパティに対しての変更は可能な限り _提供する側_ の内部に留めることが推奨されます**
151
151
152
-
For example, in the event we needed to change the user's location, we would ideally do this inside of our `MyMap`component.
However, there are times where we need to update the data inside of the component where the data is injected. In this scenario, we recommend providing a method that is responsible for mutating the reactive property.
Finally, we recommend using `readonly` on provided property if you want to ensure that the data passed through `provide` cannot be mutated by the injected component.
0 commit comments