inject vue3

在 Vue 3 中，你可以使用 `provide` 和 `inject` API 来进行依赖注入。这可以让你在父组件中提供数据或功能，并在子组件中进行访问和使用。

首先，在父组件中使用 `provide` 来提供数据或功能。下面是一个示例：

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import { provide, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const message = ref('Hello from parent component');

    provide('message', message);

    return {
      message
    };
  }
};
</script>

在上面的示例中，我们在父组件中使用 `provide` 来提供了一个名为 `message` 的数据，并将其绑定到 `message` 变量上。

然后，在子组件中使用 `inject` 来访问父组件提供的数据。下面是一个示例：

<template>
  <div>
    <p>{{ injectedMessage }}</p>
  </div>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    const injectedMessage = inject('message');

    return {
      injectedMessage
    };
  }
};
</script>

在上面的示例中，我们使用 `inject` 来获取名为 `message` 的数据，并将其绑定到 `injectedMessage` 变量上。然后，我们可以在子组件中使用 `injectedMessage` 来访问和展示父组件提供的数据。

请注意，`provide` 和 `inject` 是基于上下文的依赖注入，所以它们只在组件树中有效，而不是全局的。