网站建设兼容性谷歌广告

前言

在 Vue 3 中，provide 和 inject 是一对强大的 API，用于实现跨组件的依赖注入。无论是构建大型应用，还是编写组件库，它们都能帮助你以更优雅的方式管理数据共享。本文将带你深入理解 provide 和 inject 的使用方法，并通过生动的示例，展示如何在实际项目中灵活运用

什么是 provide 和 inject？

provide 和 inject 是 Vue 3 提供的一种跨组件通信机制。与 props 和 emit 不同，它们允许祖先组件向任意深度的后代组件传递数据，而无需逐层传递。这种机制在以下场景中尤为有用：

• 共享全局状态（如用户信息、主题配置）。
• 构建高阶组件或插件。
• 避免 props 层层传递的繁琐。
  
  

provide 的基本使用

provide 用于在祖先组件中提供数据，供后代组件注入。它接受两个参数：

• key：注入名，可以是字符串或 Symbol。
• value：要注入的值。

与注册生命周期钩子的 API 类似，provide() 必须在组件的 setup() 阶段同步调用。

类型:

示例:

inject 的基本使用

inject 用于在后代组件中注入祖先组件或全局应用注入(app.provide())提供的数据。它接受两个参数：

• key：注入名。
• defaultValue（可选）：当未找到匹配的 key 时使用的默认值。

与注册生命周期钩子的 API 类似，inject() 必须在组件的 setup() 阶段同步调用。

类型

注入数据
第一个参数是注入的 key。Vue 会遍历父组件链，通过匹配 key 来确定所提供的值。如果父组件链上多个组件对同一个 key 提供了值，那么离得更近的组件将会“覆盖”链上更远的组件所提供的值。如果没有能通过 key 匹配到值，inject() 将返回 undefined，

示例:

需要注意的是如果父组件提供的数据是非响应式数据, 当父组件数据的变化,子组件数据不会改变, 视图不会更新渲染
但如果父组件提供的值是一个 ref，注入进来的会是该 ref 对象，而不会自动解包为其内部的值。这使得注入方组件能够通过 ref 对象保持了和供给方的响应性链接。

provide 提供响应式数据数据

在提供数据时,可以提供响应式数据, 这样当提供数据发生变化时, 注入的数据也会发生变化

示例

当提供的响应数据user发生变化时,注入的组件显示的result 内容也会更新

provide 提供修改数据的方法

当提供/注入响应式的数据时，建议尽可能将任何对响应式状态的变更都保持在供给方组件中。这样可以确保所提供状态的声明和变更操作都内聚在同一个组件内，使其更容易维护。

如果你需要在注入组件中修改数据, 可以在提供时提供一个修改方法, 在注入组件内使用这个方法

示例

provide 提供只读响应数据

如果你不希望子组件中直接修改响应数据, 可以提供一个readonly 包装的只读数据

示例

provide 使用symbol作为注入名

至此，我们已经了解了如何使用字符串作为注入名。但如果你正在构建大型的应用，包含非常多的依赖提供，或者你正在编写提供给其他开发者使用的组件库，建议最好使用 Symbol 来作为注入名以避免潜在的冲突。

使用

当使用 TypeScript 时，key 可以是一个被类型断言为 InjectionKey 的 symbol。InjectionKey 是一个 Vue 提供的工具类型，继承自 Symbol，可以用来同步 provide() 和 inject() 之间值的类型。

使用

inject 默认值

inject 第二个参数是可选的，即在没有匹配到 key 时使用的默认值。它也可以是一个工厂函数，用来返回某些创建起来比较复杂的值。如果默认值本身就是一个函数，那么你必须将 false 作为第三个参数传入，表明这个函数就是默认值，而不是一个工厂函数。

示例

总结

provide 和 inject 为 Vue 3 提供了一种优雅的跨组件通信方式。无论是共享全局状态，还是避免 props 层层传递，它们都能帮助你以更简洁的方式管理应用数据。通过本文的学习，相信你已经掌握了 provide 和 inject 的核心用法。在实际开发中，灵活运用这些技巧，可以让你的代码更高效、更优雅。

如果你有任何疑问或想法，欢迎在评论区分享！🌟