vue3 中ProvideInject的使用

vue3 中ProvideInject的使用,第1张

父组件向子组件传递数据使用 props。父组件向子子组件传递数据的时候,如果仍然将 prop 沿着组件链逐级传递下去,可能会很麻烦。

对于这种情况,我们可以使用一对 provideinject。无论组件层次结构有多深,父组件都可以作为其所有子组件的依赖提供者。这个特性有两个部分:父组件有一个 provide 选项来提供数据,子组件有一个 inject 选项来开始使用这些数据。

例如,我们有这样的层次结构:

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

假如 我们需要TodoList组件向TodoListStatistics 传递一个user参数

1)TodoList 从vue中引入provide ,provide('user',info.user) 把user参数传递给了所有的子组件


2)TodoListStatistics组件通过从vue中获取inject()函数后 获取use参数 inject('user')


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1296613.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-10
下一篇 2022-06-10

发表评论

登录后才能评论

评论列表(0条)

保存