Skip to content

Commit 549182c

Browse files
authored
Guide > Components In-Depth > Provide / inject の翻訳を追従 (#301)
* fix: update broken links vuejs/docs@96d6403#diff-e2d6d7ad2f53f101c031a6a845ead5917445c9a7745f832ecb079d8d319c9258 * Add inject example to reactive section of docs vuejs/docs@3a40518#diff-e2d6d7ad2f53f101c031a6a845ead5917445c9a7745f832ecb079d8d319c9258 * docs: fix typo in component-provide-inject.md vuejs/docs@3804d0e#diff-e2d6d7ad2f53f101c031a6a845ead5917445c9a7745f832ecb079d8d319c9258
1 parent c721f83 commit 549182c

File tree

1 file changed

+10
-4
lines changed

1 file changed

+10
-4
lines changed

src/guide/component-provide-inject.md

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@
44
55
通常、親コンポーネントから子コンポーネントにデータを渡すとき、[props](component-props.md) を使います。深くネストされたいくつかのコンポーネントがあり、深い階層にあるコンポーネントが浅い階層にあるコンポーネントの何かしらのデータのみを必要としている構造を想像してください。この場合でも、鎖のように繋ったコンポーネント全体にプロパティを渡す必要がありますが、時にそれは面倒になります。
66

7-
そのような場合は、`provide``inject` のペアを利用できます。コンポーネント階層の深さに関係なく、親コンポーネントは、そのすべての子階層へ依存関係を提供するプロバイダとして機能することができます。この機能は2つの機能からなります:
8-
親コンポーネントは、データを提供するためのオプション `provide` を持ち、子コンポーネントはそのデータを利用するためのオプション `inject` を持っています。
7+
そのような場合は、`provide``inject` のペアを利用できます。コンポーネント階層の深さに関係なく、親コンポーネントは、そのすべての子階層へ依存関係を提供するプロバイダとして機能することができます。この機能は2つの機能からなります: 親コンポーネントは、データを提供するためのオプション `provide` を持ち、子コンポーネントはそのデータを利用するためのオプション `inject` を持っています。
98

109
![Provide/inject scheme](/images/components_provide.png)
1110

@@ -60,7 +59,7 @@ app.component('todo-list', {
6059
}
6160
},
6261
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`
6463
},
6564
template: `
6665
...
@@ -108,6 +107,13 @@ app.component('todo-list', {
108107
}
109108
}
110109
})
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+
})
111117
```
112118

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#リアクティブ) をご覧ください。

0 commit comments

Comments
 (0)