vue3 provide 和 inject 轻松实现跨组件

Vue 3 中的 provide 和 inject 是一对强大的 API，使得在父子组件之间进行数据传递变得更加简单。通过 provide 在父组件中提供数据，并使用 inject 在子组件中注入这些数据，我们可以轻松地实现跨组件

什么是 provide 和 inject？

provide 和 inject 是 Vue 3 中提供的一对用于父子组件之间进行数据传递的 API。通过 provide，父组件可以提供数据；而 inject 则允许子组件在任何地方注入这些数据。

这种方式使得数据在组件树中的传递变得更加简单和直接，无需通过繁琐的 prop 属性传递。

使用 provide 提供数据

在父组件中，我们可以使用 provide 函数来提供数据给子组件。下面是一个示例：

//ParentComponent.vue 
<script lang="ts" setup>
import child from "./components/child.vue"
import { ref, provide } from "vue"
const loading = ref<Boolean>(true)
// 使用 provide 提供数据给子组件
provide("message", loading)
</script>
<template>
  <div class="app-container">
    <child />
  </div>
</template>
<style lang="scss" scoped></style>

使用 inject 注入数据

在子组件中，我们可以使用 inject 函数来注入父组件提供的数据

//ChildComponent.vue
<script lang="ts" setup>
import { inject } from "vue"
const loading = inject("message")
</script>
<template>
  <el-button @click="loading = !loading">关闭</el-button>

  <div class="app-container" v-loading="loading">child</div>
</template>
<style lang="scss" scoped></style>

用 inject 来注入父组件提供的数据。我们使用 'loading' 作为键来获取父组件提供的数据，并将其赋值给 loading 变量。

现在，子组件可以在任何地方直接使用 loading，而不需要通过繁琐的 prop 属性传递数据。

注意事项和使用场景

在使用 provide 和 inject 时，需要注意以下几点：
provide 和 inject 需要在父组件和子组件之间存在直接或间接的关系。也就是说，它们只能在共同的祖先组件中使用。
provide 和 inject 并不会触发响应式更新。如果提供的数据是响应式的，子组件无法自动更新。如果需要响应式的数据传递，请使用 reactive 或 ref 来包装提供的数据。

使用 provide 提供的数据是全局可访问的，因此请注意不要与其他组件提供的相同键名发生冲突。
这对 API 在一些场景下非常有用，例如在多层级嵌套的组件树中传递主题、用户身份信息等全局数据，或者在父组件提供配置选项给所有子组件使用等。