Vue3.0 组件的provide/inject

最新推荐文章于 2024-05-28 17:15:42 发布

rebornszoro

最新推荐文章于 2024-05-28 17:15:42 发布

阅读量2.7k

点赞数

分类专栏： vue3.0中文文档 # 深入了解组件文章标签： vue javascript 前端

原文链接：https://v3.vuejs.org/guide/component-provide-inject.html

版权

组件的provide/inject

阅读本篇之前应当先阅读组件基础。

通常当我们需要将数据从父组件传递到子组件时，我们通过props实现。设想一下这样的一个组件结构，这个结构中有一些嵌套层级很深的组件，我们想在内嵌层级很深的一个子组件中，调用顶层父组件的某些数据。在这种情况下，如果我们仍需要通过prop从父组件到子组件之间的组件链中传递数据，这可能挺烦人的。

为了应对这种情况，我们可以使用provide与inject的组合。父组件可以无视组件层级的深度，作为所有子组件的依赖提供者。这个特性基于两部分：父组件通过provide选项提供数据，并且子组件通过inject选项使用所提供的数据。

例如像这样的一个层级：

Root
└─ TodoList
   ├─ TodoItem
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics

如果我们想将todo-items的长度传递到TodoListStatistics，我们可能要通过prop，按照TodoList --> TodoListFooter --> TodoListStatistics的层级，一层层地往下传。但通过provide / inject，我们可以直接这样实现：

关注