provide 和 inject

当需要从父组件向子组件传递数据时，我们使用 props。 但有一些深度嵌套的组件，而深层的子组件只需要父组件的部分内容，如果仍然将 prop 沿着组件链逐级传递下去，可能会很麻烦。 对于这种情况，可以使用 provide 和 inject。 无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。 这个特性有两个部分：父组件有一个 provide 选项来提供数据，子组件有一个 inject 选项来开始使用这些数据。

App.vue

<template>
  <Parent></Parent>
</template>
<script setup>
import { provide } from "vue";
import Parent from "@/components/Parent.vue";
provide("name", "Andy");
</script>

Parent.vue

<template>
    <Child></Child>
</template>
<script setup>
import { inject } from "vue";
import Child from "@/components/Child.vue";
let appinfo = inject("name");
console.log('parent:', appinfo);
</script>

Child.vue

<template></template>
<script setup>
import { inject } from "vue";
let appinfo = inject("name");
console.log('child:', appinfo);
</script>

App 向 Parent 和 Child 传值