File tree 1 file changed +10
-4
lines changed
1 file changed +10
-4
lines changed Original file line number Diff line number Diff line change 4
4
5
5
通常、親コンポーネントから子コンポーネントにデータを渡すとき、[ props] ( component-props.md ) を使います。深くネストされたいくつかのコンポーネントがあり、深い階層にあるコンポーネントが浅い階層にあるコンポーネントの何かしらのデータのみを必要としている構造を想像してください。この場合でも、鎖のように繋ったコンポーネント全体にプロパティを渡す必要がありますが、時にそれは面倒になります。
6
6
7
- そのような場合は、` provide ` と ` inject ` のペアを利用できます。コンポーネント階層の深さに関係なく、親コンポーネントは、そのすべての子階層へ依存関係を提供するプロバイダとして機能することができます。この機能は2つの機能からなります:
8
- 親コンポーネントは、データを提供するためのオプション ` provide ` を持ち、子コンポーネントはそのデータを利用するためのオプション ` inject ` を持っています。
7
+ そのような場合は、` provide ` と ` inject ` のペアを利用できます。コンポーネント階層の深さに関係なく、親コンポーネントは、そのすべての子階層へ依存関係を提供するプロバイダとして機能することができます。この機能は2つの機能からなります: 親コンポーネントは、データを提供するためのオプション ` provide ` を持ち、子コンポーネントはそのデータを利用するためのオプション ` inject ` を持っています。
9
8
10
9
![ Provide/inject scheme] ( /images/components_provide.png )
11
10
@@ -60,7 +59,7 @@ app.component('todo-list', {
60
59
}
61
60
},
62
61
provide: {
63
- todoLength: this .todos .length // this will result in error ' Cannot read property 'length' of undefined`
62
+ todoLength: this .todos .length // this will result in error ` Cannot read property 'length' of undefined`
64
63
},
65
64
template: `
66
65
...
@@ -108,6 +107,13 @@ app.component('todo-list', {
108
107
}
109
108
}
110
109
})
110
+
111
+ app .component (' todo-list-statistics' , {
112
+ inject: [' todoLength' ],
113
+ created () {
114
+ console .log (` Injected property: ${ this .todoLength .value } ` ) // > Injected property: 5
115
+ }
116
+ })
111
117
```
112
118
113
- こうすると、` todos.length ` へのあらゆる変更が 、` todoLength ` が注入されたコンポーネントに正しく反映されます。` reactive ` の provide/inject の詳細については、[ Composition API セクション ] ( composition-api-provide-inject.html#injection-reactivity ) をご覧ください。
119
+ こうすると、` todos.length ` へのあらゆる変更は 、` todoLength ` が注入されたコンポーネントに正しく反映されます。` computed ` については、 [ 算出プロパティとウォッチのセクション ] ( reactivity-computed-watchers.html#算出プロパティ ) を、そして ` reactive ` の provide/inject の詳細については、[ Composition API のセクション ] ( composition-api-provide-inject.html#リアクティブ ) をご覧ください。
You can’t perform that action at this time.
0 commit comments