在Vue中，provide 和 inject 是用于实现跨层级组件通信的API，特别适用于隔代组件通信的场景。下面我将详细解释其原理和提供一个具体的例子。
原理
定义：
provide：允许一个祖先组件向其所有子孙后代组件提供一个依赖，不论组件层次有多深，只要在其下游，就可以通过 inject 来接收。
inject：允许一个后代组件从祖先组件中注入一个依赖。
使用场景：
当某个深层嵌套的子组件需要访问它父组件链中某一级的数据时，通过一层一层地传递props会变得很麻烦。这时，可以使用 provide 和 inject 来解决。
特点：
它们是单向的，不是可响应的。但是，如果 provide 的是一个可观察的对象或响应式引用，那么对象的属性仍然可以是可响应的。
父组件不需要知道哪些子组件使用了它的 provide 属性。
子组件也不需要知道它注入的 inject 属性来自哪里。
例子
假设我们有以下组件层级关系：
Grandfather.vue
├─ Son.vue
└─ Grandson.vue
在这个例子中，Grandfather.vue 想要向 Grandson.vue 传递一个数据 name。
Grandfather.vue
vue
<template>
<div>
<h1>Grandfather Component</h1>
<Son />
</div>
</template>
<script>
import Son from './Son.vue';
export default {
name: 'Grandfather',
components: {
Son
},
data() {
return {
name: 'Grandfather Name'
};
},
provide() {
return {
grandfatherName: this.name
};
}
};
</script>
Son.vue
vue
<template>
<div>
<h2>Son Component</h2>
<!-- 这里不需要处理任何与 provide/inject 相关的内容 -->
<Grandson />
</div>
</template>
<script>
import Grandson from './Grandson.vue';
export default {
name: 'Son',
components: {
Grandson
}
};
</script>
Grandson.vue
vue
<template>
<div>
<h3>Grandson Component</h3>
<p>Received name from Grandfather: {{ grandfatherName }}</p>
</div>
</template>
<script>
export default {
name: 'Grandson',
inject: ['grandfatherName']
};
</script>
在这个例子中，Grandfather.vue 通过 provide 提供了一个名为 grandfatherName 的属性，而 Grandson.vue 通过 inject 接收了这个属性，并在模板中进行了展示。尽管 Son.vue 在中间，但它并没有参与 provide 和 inject 的过程。
标签：vue,Grandson,provide,Grandfather,inject,组件 From： https://blog.csdn.net/codedadi/article/details/139725592