From f98ce3d0d82c4060cd8d032c3fcfac57c04dd9b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alois=20Se=C4=8Dk=C3=A1r?= Date: Wed, 19 Feb 2025 20:04:51 +0100 Subject: [PATCH] docs: clarify how inject() works with multiple providing components --- src/api/composition-api-dependency-injection.md | 2 +- src/guide/components/provide-inject.md | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/api/composition-api-dependency-injection.md b/src/api/composition-api-dependency-injection.md index f2ec5127fb..460459d302 100644 --- a/src/api/composition-api-dependency-injection.md +++ b/src/api/composition-api-dependency-injection.md @@ -64,7 +64,7 @@ Injects a value provided by an ancestor component or the application (via `app.p - **Details** - The first argument is the injection key. Vue will walk up the parent chain to locate a provided value with a matching key. If multiple components in the parent chain provides the same key, the one closest to the injecting component will "shadow" those higher up the chain. If no value with matching key was found, `inject()` returns `undefined` unless a default value is provided. + The first argument is the injection key. Vue will walk up the parent chain to locate a provided value with a matching key. If multiple components in the parent chain provide the same key, the one closest to the injecting component will "shadow" those higher up the chain and its value will be used. If no value with matching key was found, `inject()` returns `undefined` unless a default value is provided. The second argument is optional and is the default value to be used when no matching value was found. diff --git a/src/guide/components/provide-inject.md b/src/guide/components/provide-inject.md index 641292d9c4..6c0addc7c2 100644 --- a/src/guide/components/provide-inject.md +++ b/src/guide/components/provide-inject.md @@ -123,6 +123,8 @@ const message = inject('message') ``` +If multiple parents provide data with the same key, inject will resolve to the value from the closest parent in component's parent chain. + If the provided value is a ref, it will be injected as-is and will **not** be automatically unwrapped. This allows the injector component to retain the reactivity connection to the provider component. [Full provide + inject Example with Reactivity](https://play.vuejs.org/#eNqFUUFugzAQ/MrKF1IpxfeIVKp66Kk/8MWFDXYFtmUbpArx967BhURRU9/WOzO7MzuxV+fKcUB2YlWovXYRAsbBvQije2d9hAk8Xo7gvB11gzDDxdseCuIUG+ZN6a7JjZIvVRIlgDCcw+d3pmvTglz1okJ499I0C3qB1dJQT9YRooVaSdNiACWdQ5OICj2WwtTWhAg9hiBbhHNSOxQKu84WT8LkNQ9FBhTHXyg1K75aJHNUROxdJyNSBVBp44YI43NvG+zOgmWWYGt7dcipqPhGZEe2ef07wN3lltD+lWN6tNkV/37+rdKjK2rzhRTt7f3u41xhe37/xJZGAL2PLECXa9NKdD/a6QTTtGnP88LgiXJtYv4BaLHhvg==) @@ -169,7 +171,7 @@ export default { } ``` -If multiple parents provide data with the same key, inject will resolve to the first parent in its parent chain. +If multiple parents provide data with the same key, inject will resolve to the value from the closest parent in component's parent chain. [Full provide + inject example](https://play.vuejs.org/#eNqNkcFqwzAQRH9l0EUthOhuRKH00FO/oO7B2JtERZaEvA4F43+vZCdOTAIJCImRdpi32kG8h7A99iQKobs6msBvpTNt8JHxcTC2wS76FnKrJpVLZelKR39TSUO7qreMoXRA7ZPPkeOuwHByj5v8EqI/moZeXudCIBL30Z0V0FLXVXsqIA9krU8R+XbMR9rS0mqhS4KpDbZiSgrQc5JKQqvlRWzEQnyvuc9YuWbd4eXq+TZn0IvzOeKr8FvsNcaK/R6Ocb9Uc4FvefpE+fMwP0wH8DU7wB77nIo6x6a2hvNEME5D0CpbrjnHf+8excI=)