Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Guide > Components In-Depth > Provide / inject の翻訳を追従 #301

Merged
merged 3 commits into from
May 2, 2021
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 10 additions & 4 deletions src/guide/component-provide-inject.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,7 @@

通常、親コンポーネントから子コンポーネントにデータを渡すとき、[props](component-props.md) を使います。深くネストされたいくつかのコンポーネントがあり、深い階層にあるコンポーネントが浅い階層にあるコンポーネントの何かしらのデータのみを必要としている構造を想像してください。この場合でも、鎖のように繋ったコンポーネント全体にプロパティを渡す必要がありますが、時にそれは面倒になります。

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

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

Expand Down Expand Up @@ -60,7 +59,7 @@ app.component('todo-list', {
}
},
provide: {
todoLength: this.todos.length // this will result in error 'Cannot read property 'length' of undefined`
todoLength: this.todos.length // this will result in error `Cannot read property 'length' of undefined`
},
template: `
...
Expand Down Expand Up @@ -108,6 +107,13 @@ app.component('todo-list', {
}
}
})

app.component('todo-list-statistics', {
inject: ['todoLength'],
created() {
console.log(`Injected property: ${this.todoLength.value}`) // > Injected property: 5
}
})
```

こうすると、`todos.length`へのあらゆる変更が、`todoLength` が注入されたコンポーネントに正しく反映されます。`reactive` の provide/inject の詳細については、[Composition API セクション](composition-api-provide-inject.html#injection-reactivity) をご覧ください。
こうすると、`todos.length` へのあらゆる変更は、`todoLength` が注入されたコンポーネントに正しく反映されます。`computed` については、 [算出プロパティとウォッチのセクション](reactivity-computed-watchers.html#算出プロパティ) を、そして `reactive` の provide/inject の詳細については、[Composition API のセクション](composition-api-provide-inject.html#リアクティブ) をご覧ください。