vue中组合式 API-依赖注入之provide和inject的用法——功能-把一个祖先组件指定的数据和方法，传递给其所有子孙后代 & provide-提供或发送数据， inject-接收数据

在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'值，即使这个值在组件层次结构中有很深的层次。