vue3中provide/inject的使用

Vue3 中的 provide/inject 是用来在组件间共享数据的一种机制。

在父组件中使用 provide 来提供数据，在子组件中使用 inject 来获取数据。

父组件示例：

<template>
  <div>
    <Child />
  </div>
</template>

<script>
export default {
  provide() {
    return {
      sharedData: '这是共享数据'
    }
  }
}
</script>

子组件示例：

<template>
  <div>{{ sharedData }}</div>
</template>

<script>
export default {
  inject: ['sharedData']
}
</script>

在上面的例子中，父组件通过 provide 提供了一个名为 sharedData 的数据，子组件通过 inject 来获取这个数据并在模板中使用。

注意，使用 inject 时需要在组件中声明，否则会报错。