依赖注入实现深层次组件传值

MagnumHou 2023-03-03 11:28:09

课时名称	课时知识点
依赖注入实现深层次组件传值	依赖注入实现深层次组件传值依赖注入实现深层次组件传值

...全文

97 回复打赏收藏举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

父向子传递数据是通过 props，子向父是通过 events（$emit）；通过父链 / 子链也可以通信（$parent / $children）；ref 也可以访问组件实例；$root 获取根组件EventBusvuex通过共同的父亲进行传递信息EventBusvuex父子层层传递在我们日常开发的过程中，我们需要从父组件向子组件传递数据，会使用 props；如果组件层级过多，使用 props 沿着组件链逐级传递下去，十分的麻烦， provide 和 inject 就可以解决这一问题。

1. props 和 emits传参 2. 路由传参（query、params） 3. 第三方库（pubsub-js）

本文将详细介绍依赖注入的基本概念、作用及其实现方法，并通过具体的示例代码来展示其在Vue应用中的应用。依赖注入是一种设计模式，它允许将一个对象的依赖项（通常是外部资源或者服务）通过构造函数或者其他方法注入到该对象中，而不是由对象自己去创建这些依赖。如果是对象，则键名对应注入的名字，键值则可以是一个配置对象，用于指定默认值或类型。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。选项应该是一个对象，其中的键名对应注入的名字，键值则是要注入的值。

怎么解决vue多层组件Prop 逐级透传问题?

provide / inject 2.2.0 新增类型： provide：Object | () => Object inject：Array<string> | { [key: string]: string | Symbol | Object } // 父级组件提供 'foo' var Provider = { provide: { f...

橙汐工作室

3

社区成员

332

社区内容

发帖

与我相关

我的任务

vue.js前端框架html5 企业社区天津·河西区

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

核心使命：为IT从业者和技术爱好者提供一个优质的学习、交流和分享平台，促进技术创新和成长。
注意事项：请保持尊重、友善的交流环境，遵守社区规则，禁止发布违法、侵权、低俗或有害信息。
激励机制：为了鼓励积极参与社区的用户，我们会设置积分和勋章系统，支持高质量的原创内容和有益的互动。
感谢您的加入，期待与您一起在CSDN社区共同探索技术，交流经验，共同成长！

试试用AI创作助手写篇文章吧

+ 用AI写文章