Vue 3.2中，provide 和 inject 可以帮助我们更好地实现组件之间的信息共享。下面是它们的使用方法和一个简单的案例：

1、provide:

provide 是一个在父组件中注册信息的方法。子组件可以通过 inject 来访问这些信息。

语法：

provide(key: symbol | string, value: any): void;

参数：

• key：一个唯一的标识符，用于识别要提供的信息。
• value：要提供的数据或引用。

例如，在父组件中注册一个名称为 userInfo 的信息：

import { defineComponent, provide } from 'vue';

export default defineComponent({
  setup() {
    const userInfo = {
      name: 'Alice',
      age: 20,
    };

    provide('userInfo', userInfo);

    return {};
  },
});

2、inject：

inject 用于在子组件中访问父组件提供的信息。

语法：

inject(key: string | symbol, defaultValue?: unknown): any;

参数：

• key：一个唯一的标识符，用于获取提供的信息。
• defaultValue：当父组件没有提供该信息时的默认值。

例如，在子组件中获取名称为 userInfo 的信息：

import { defineComponent, inject } from 'vue';

export default defineComponent({
  setup() {
    const userInfo = inject('userInfo', {});

    return {
      userInfo,
    };
  },
});

下面是一个具体的实现案例。

父组件：

<template>
  <div>
    <h2>Parent Component</h2>
    <p>Name: {{ userInfo.name }}</p>
    <p>Age: {{ userInfo.age }}</p>
    <child-component />
  </div>
</template>

<script lang="ts">
import { defineComponent, provide } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default defineComponent({
  name: 'ParentComponent',
  components: {
    ChildComponent,
  },
  setup() {
    const userInfo = {
      name: 'Alice',
      age: 20,
    };

    provide('userInfo', userInfo);

    return {
      userInfo,
    };
  },
});
</script>

子组件：

<template>
  <div>
    <h2>Child Component</h2>
    <p>Name: {{ userInfo.name }}</p>
    <p>Age: {{ userInfo.age }}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent, inject } from 'vue';

export default defineComponent({
  name: 'ChildComponent',
  setup() {
    const userInfo = inject('userInfo', {});

    return {
      userInfo,
    };
  },
});
</script>

这个案例中，父组件中通过 provide 提供了一个名称为 userInfo 的信息对象；子组件中通过 inject 访问了该信息对象并展示了它的属性值。