Skip to content

Commit fab4e32

Browse files
authored
docs: clarify how inject() works with multiple providing components (#3180)
1 parent 0ebd878 commit fab4e32

File tree

2 files changed

+4
-2
lines changed

2 files changed

+4
-2
lines changed

Diff for: src/api/composition-api-dependency-injection.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ Injects a value provided by an ancestor component or the application (via `app.p
6464

6565
- **Details**
6666

67-
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.
67+
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.
6868

6969
The second argument is optional and is the default value to be used when no matching value was found.
7070

Diff for: src/guide/components/provide-inject.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,8 @@ const message = inject('message')
123123
</script>
124124
```
125125

126+
If multiple parents provide data with the same key, inject will resolve to the value from the closest parent in component's parent chain.
127+
126128
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.
127129

128130
[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 {
169171
}
170172
```
171173

172-
If multiple parents provide data with the same key, inject will resolve to the first parent in its parent chain.
174+
If multiple parents provide data with the same key, inject will resolve to the value from the closest parent in component's parent chain.
173175

174176
[Full provide + inject example](https://play.vuejs.org/#eNqNkcFqwzAQRH9l0EUthOhuRKH00FO/oO7B2JtERZaEvA4F43+vZCdOTAIJCImRdpi32kG8h7A99iQKobs6msBvpTNt8JHxcTC2wS76FnKrJpVLZelKR39TSUO7qreMoXRA7ZPPkeOuwHByj5v8EqI/moZeXudCIBL30Z0V0FLXVXsqIA9krU8R+XbMR9rS0mqhS4KpDbZiSgrQc5JKQqvlRWzEQnyvuc9YuWbd4eXq+TZn0IvzOeKr8FvsNcaK/R6Ocb9Uc4FvefpE+fMwP0wH8DU7wB77nIo6x6a2hvNEME5D0CpbrjnHf+8excI=)
175177

0 commit comments

Comments
 (0)