Vue中的provide/inject是一种依赖注入的机制，它允许父组件向子组件传递数据，而不需要通过props逐层传递。通过provide/inject可以实现以下功能：
-
全局状态管理：通过在根组件中使用provide提供数据，其他子组件可以通过inject注入这些数据。这样可以实现全局共享的状态管理，避免了通过props传递数据的繁琐和层级嵌套的限制。
-
跨层级通信：通过provide/inject可以实现跨层级组件之间的通信，不需要通过父子组件关系来传递数据。这对于一些无关联的组件之间的通信非常方便。
-
插件扩展：通过provide/inject可以将一些插件或第三方库的实例注入到组件中，让组件可以直接使用这些功能。这样可以实现组件与插件的解耦，提高组件的复用性。
-
主题配置：通过provide/inject可以将主题配置数据注入到组件中，让组件可以根据配置来自定义显示样式。
-
路由信息共享：通过provide/inject可以将路由信息注入到子组件中，让子组件可以访问到当前路由的信息，如路径、参数等。
总体而言，provide/inject可以实现组件之间的数据共享、跨层级通信和插件扩展，提供了一种更灵活且方便的依赖注入方式。
一、vue2中
在 Vue 2 中，provide 和 inject 是一对用于父组件向子组件传递数据的选项。
在子组件中，通过 inject 属性可以接收父组件通过 provide 传递过来的数据，实现跨层级组件间的通信。
示例：
父组件中：
<template>
<div>
<ChildComponent></ChildComponent>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
provide() {
return {
name: 'John'
};
}
}
</script>
子组件中：
<template>
<div>
<p>My name is {
{ injectedName }}</p>
</div>
</template>
<script>
export default {
inject: ['name'],
computed: {
injectedName() {
return this.name;
}
}
}
</script>
二、vue3中
在 Vue 3 中，provide 和 inject 的使用方法依旧相同，但是有一个重要的改变。在 Vue 3 中，使用 provide 和 inject 能够实现响应式传递数据。
示例：
<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>
子组件中：
<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>
在上述示例中，父组件通过 provide 传递了一个响应式的 name 数据给子组件。子组件通过 inject 接收到这个数据，并能够改变它。当子组件改变了 name 的值时，父组件的 name 值也会随之变化，即实现了响应式的数据传递。