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 在一些场景下非常有用，例如在多层级嵌套的组件树中传递主题、用户身份信息等全局数据，或者在父组件提供配置选项给所有子组件使用等。
网友评论