Provide/inject in Vue is a dependency injection mechanism that allows parent components to pass data to child components without passing props layer by layer. The following functions can be achieved through provide/inject:
-
Global state management : By using provide in the root component to provide data, other sub-components can inject this data through inject. This can achieve globally shared state management and avoid the cumbersomeness of passing data through props and the limitations of hierarchical nesting.
-
Cross-level communication : Communication between cross-level components can be achieved through provide/inject, and there is no need to pass data through the parent-child component relationship. This is very convenient for communication between unrelated components.
-
Plug-in extension : Through provide/inject, some instances of plug-ins or third-party libraries can be injected into the component, so that the component can directly use these functions. This can achieve decoupling of components and plug-ins and improve the reusability of components.
-
Theme configuration : The theme configuration data can be injected into the component through provide/inject, so that the component can customize the display style according to the configuration.
-
Routing information sharing : Routing information can be injected into subcomponents through provide/inject, so that subcomponents can access current routing information, such as paths, parameters, etc.
Overall, provide/inject can realize data sharing, cross-level communication and plug-in expansion between components, providing a more flexible and convenient dependency injection method.
1. vue2
In Vue 2, provideand injectare a pair of options for passing data from a parent component to a child component.
In child components, the data passed by injectthe parent component can be received through the attribute to achieve communication between cross-level components.provide
Example:
In parent component:
<template>
<div>
<ChildComponent></ChildComponent>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
provide() {
return {
name: 'John'
};
}
}
</script>
In subcomponent:
<template>
<div>
<p>My name is {
{ injectedName }}</p>
</div>
</template>
<script>
export default {
inject: ['name'],
computed: {
injectedName() {
return this.name;
}
}
}
</script>
2. vue3
In Vue 3, the usage of provideand injectis still the same, but there is an important change. In Vue 3, using provideand injectcan achieve responsive data transfer.
Example:
<template>
<div>
<ChildComponent></ChildComponent>
</div>
</template>
<script>
import {
provide, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
setup() {
const name = ref('John');
provide('name', name);
}
}
</script>
In subcomponent:
<template>
<div>
<p>My name is {
{ injectedName }}</p>
<button @click="changeName">Change Name</button>
</div>
</template>
<script>
import {
inject } from 'vue';
export default {
setup() {
const name = inject('name');
const changeName = () => {
name.value = 'Bob';
};
return {
name,
changeName
};
},
computed: {
injectedName() {
return this.name;
}
}
}
</script>
In the above example, the parent component providepasses a responsive namedata to the child component via . Child components injectreceive this data via and can change it. When the child component changes namethe value, the value of the parent component namewill also change accordingly, that is, responsive data transfer is achieved.