Vue3 provide和inject的使用

provide / inject

官网解析：provide / inject

1.provide

父组件/祖先组件向子组件/子孙组件传递数据时，写在父级组件里，接收两个参数，第一个参数是 key，即数据的名称；第二个参数为 value，即数据的值

2.inject

子组件/子孙组件接收从父级/祖先组件传递过来的数据，写在子组件里，接收一个参数 key，即父组件或祖先组件传递的数据名称

示例：
父组件a.vue

<template>
  <div class="a">
    <!-- 我是aaa -->
    {{ "我是父组件的数据：" + name + "的年龄是" + age }}
  </div>
  <B />
</template>

<script>
import B from "./inject/b.vue";
import { toRefs, provide } from "vue";
export default {
  components: { B },
  setup() {
    const data = {
      name: "百变小樱",
      age: "永生",
    };
    provide("info", data); // 向子孙组件传递名为info的数据
    return { ...toRefs(data) };
  },
};
</script>

<style lang="scss" scoped>
.a {
  border: 1px solid blue;
}
</style>

子组件b

<template>
  <div class="b">
    <!-- 我是bbbbbb -->
    {{ "我是传过来的数据" + name + "的年龄是" + age }}
  </div>
  {{ name }}
</template>

<script>
import { inject, toRefs } from "vue";
export default {
  setup() {
    const data = inject("info"); // 接收a传过来的变量
    return { ...toRefs(data) };
  },
};
</script>

<style lang="scss" scoped>
.b {
  border: 1px solid green;
}
</style>