Using Provide and Inject in Vue

It's easy in Vue to provide/give props or properties to a child element. are one of the main ways we can pass data from a parent element or vue template to a child element. For example, in the code below, we give our child element the property , and set it to . That means that can now access the data : Properties in Vue PopularList name Most Popular Posts PopularList Most Popular Posts , sometimes child elements can contain other child elements. If we want to pass data from a parent component to a grandchild component, an easier way of doing this is with / . This lets us data at a parent level, and it at any level below that. However provide inject provide inject This means if we have a property that is not used by the child, but is used by the , we don't have to unnecessarily pass it through both, like - we can instead simply pass it as , as shown in the diagram below: grandchild Parent → Child → GrandChild Parent → Grandchild How to use provide and inject in Vue If you are using the composition API, you can any set of data using the function: provide provide import { provide } from 'vue' provide('myKey', 'message'); has both a key, and a value - above, the key is , and the value is . As with props, this could be an object, a number, or any other valid type. We can also make this property reactive, so it stays up to date in the grandchild element by using the function: provide myKey message ref import { provide, ref } from 'vue' const message = ref('message'); provide('myKey', message); If you are using the Options API instead, you can provide data in a component using the following structure: export default { provide: { myKey: 'message' } } If you want the Options API version of reactivity in , you have to use . As such, the composition API is a little more straightforward to use with . We also need to use the notation if we are giving any per-instance state - i.e. where the data is coming from the .functio. provide computed provide/inject provide() data() export default { data() { return { message: 'message' } }, provide() { return { // This sets `myKey` to the message property from data(). // Putting it in `computed()` makes it reactive. myKey: computed(() => this.message) } } } that we've provided data, it can be accessed in any child component at any level by using the function. Now inject Accessing parent data using inject in Vue Now that we've defiend in a component, you can access that data using . In a child component or a grandchild component, we can access to refer to . For example, suppose we have a Vue component that looks like this: provide inject myKey message import { ref, provide } from 'vue' import ChildElement from './Child.vue'; const message = ref('message'); provide('myKey', message); Hello World!

... And then a child element ( ) that looks like this: Child.vue import GrandChildElement from './GrandChildElement.vue'; Within , we can access , since we provided it in a parent. We could also do this in , but we could also just use props for that. gives us the power to get data from multiple levels up. To access this data in , we use . Our file could look a little like this: GrandChildElement myKey Child.vue provide GrandChildElement inject GrandChildElement.vue import { inject } from 'vue' const message = inject('myKey') here will return the text , since that's what we set to with . If you're using the Options API, you can do this instead: const message message myKey provide export default { inject: [ 'myKey' ], created() { // Can access this.myKey here } } Now the value of is available to a grandchild component, without the need to pass it to the child first via props. myKey Also published . here

Using Provide and Inject in Vue

Too Long; Didn't Read

@smpnjn

RELATED STORIES