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
+31-26Lines changed: 31 additions & 26 deletions
Original file line number
Diff line number
Diff line change
@@ -1,12 +1,14 @@
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
8
7
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.
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`.
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.
88
+
`inject`関数は2つの引数をとります:
83
89
84
-
The `inject` function takes two parameters:
90
+
1. 注入されるプロパティ名
91
+
2. デフォルト値 (**Optional**)
85
92
86
-
1. The name of the property to inject
87
-
2. A default value (**Optional**)
93
+
`MyMaker` コンポーネントは、以下のようにリファクタリングすることができます:
88
94
89
-
Using our `MyMarker` component, we can refactor it with the following code:
90
95
91
96
```vue{3,6-14}
92
97
<!-- src/components/MyMarker.vue -->
@@ -107,13 +112,13 @@ export default {
107
112
</script>
108
113
```
109
114
110
-
## Reactivity
115
+
## リアクティブ
111
116
112
-
### Adding Reactivity
117
+
### リアクティブの追加
113
118
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**.
155
+
リアクティブな provide / inject の値を使う場合、**リアクティブなプロパティに対しての変更は可能な限り _提供する側_ の内部に留めることが推奨されます**
151
156
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