Vue3.2在script setup语法中provide和inject的使用方法

再使用 <script setup> 语法时，我们可以把 provide 和 inject 放在 setup 函数中来使用。下面是一个简单的案例：

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

<script setup lang="ts">
import ChildComponent from './ChildComponent.vue';

const userInfo = {
  name: 'Alice',
  age: 20,
};
// 在setup中使用 provide
const setup = () => {
  provide('userInfo', userInfo);

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

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

export default defineComponent({
  name: 'ParentComponent',
  components: {
    ChildComponent,
  },
});
</script>

在这个案例中，我们在 <script setup> 中定义了一个变量 userInfo 和 setup 函数，userInfo 存储的是用户信息。然后再 setup 函数中，利用 provide 方法把 userInfo 提供给子组件中的 inject 使用，并将 userInfo 作为返回值返回。最后在父组件中使用 <child-component> 加载子组件 ChildComponent。

下面是子组件 ChildComponent 的代码：

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

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

// 在 setup 中使用 inject
const setup = () => {
  const userInfo = inject('userInfo', {});

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

在子组件中，我们同样使用 <script setup> 语法，并定义了一个 setup 函数。在 setup 函数中，我们利用 inject 方法来获取父组件中提供的 userInfo 数据，并将其作为返回值返回给模板中展示。

这里需要注意，inject 方法的第二个参数是默认值。因为 userInfo 在父组件中提供，如果父组件没有提供该数据，我们需要设置一个默认值以免出现错误。

综上所述，在 <script setup> 中使用 provide 和 inject 的方法是和普通模式下完全一致的，只不过是把它们放在了 setup 函数中。