在Vue中，provide/inject 主要用于父组件向其所有子孙后代注入一个依赖，不论组件层次有多深，只要调用了inject即可访问到这个依赖。
这是一个使用Vue的provide/inject的例子：
<!-- GrandParent.vue -->
<template>
<div>
<Parent />
</div>
</template>
<script>
import { provide } from 'vue';
import Parent from './Parent.vue';
export default {
components: {
Parent
},
setup() {
provide('message', 'Hello from GrandParent');
}
};
</script>
<!-- Parent.vue -->
<template>
<div>
<Child />
</div>
</template>
<script>
import { provide } from 'vue';
import Child from './Child.vue';
export default {
components: {
Child
},
setup() {
provide('message', 'Hello from Parent');
}
};
</script>
<!-- Child.vue -->
<template>
<div>
{{ message }}
</div>
</template>
<script>
import { inject } from 'vue';
export default {
setup() {
const message = inject('message');
return { message };
}
};
</script>在这个例子中，我们在GrandParent组件中通过provide提供了一个名为'message'的值，然后在Parent组件中覆盖了这个值。Child组件中通过inject注入了名为'message'的依赖，并在模板中展示出来。当这些组件渲染时，你会在屏幕上看到"Hello from Parent"。这说明Child组件能够访问到从GrandParent组件提供下来的'message'值，即使这个值在组件层次结构中有很深的层次。