Provide / Inject

We can use provide / inject with the Composition API as well. Both can only be called during with a current active instance.

For example, if we want to provide a book name on the root component and inject it on the child component:

If we need to provide or inject multiple values, we can do this with a subsequent call of or inject respectively:

To retain reactivity between provided and injected values, we can use a ref or when providing a value:

WARNING

We don’t recommend mutating a reactive property where it’s injected as it’s breaking Vue one-direction data flow. Instead, try to either mutate values where they are provided or provide a method to mutate them