vue的依赖注入provide和inject

最新推荐文章于 2024-08-13 18:29:45 发布

weixin_30527323

最新推荐文章于 2024-08-13 18:29:45 发布

阅读量136

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/llcdxh/p/10330929.html

本文探讨了在Vue.js中，当子组件需要访问多级父组件方法时的传统$parent属性局限性，并介绍了一种更优的解决方案：通过根组件使用provide对外提供函数，子组件则使用inject来导入父组件的函数，实现更深层次组件间的通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、解决的场景问题：

　　根父组件A有一个方法getMap，该组件A下的所有子组件B，子组件C，子组件D，或者子组件B下的子组件E等层层嵌套情况下，在某种情况下，都需要访问父组件的getMap方法，那么常用的方法是子组件B：this.$parent.getMap()，组件E则是：this.$parent.$parent.getMap()以此类推；这种情况下，使用 $parent 属性无法很好的扩展到更深层级的嵌套组件上。

二、解决方式如下

　　根组件A使用provide对外提供被访问的函数，子组件使用inject“导入”父组件的函数即可