Provide/Inject 依赖注入(未完待续)
发布时间:2024年01月10日
父组件传递给子组件数据,通过props,但是需要逐层传递
provide/Inject 的推出就是为了解决这个问题,它提供了一种组件之间共享此类值的方式,不必通过组件树每层级显示地传递props
目的是为了共享那些被 认为对于一个组件树而言是全局的数据
provide 接受两个参数:第一个参数是要注入的 key,
可以是一个字符串或者一个 symbol,第二个参数是要注入的值。
Inject 注入一个由祖先组件或整个应用 (通过 app.provide()) 提供的值。
根节点向子节点传递参数

可以通过Provide从Root传递给DeepChild

APP.VUE中引入组件

在myprofile中引入下一层的组件helloworld

使用inject取出值

使用Symbol来避免key重复
Symbol是一种基本数据类型,函数返回symbol类型的值,该类型具有静态属性和静态方法。
每一个symbol的值 都是唯一的。



结果:

文章来源:https://blog.csdn.net/dallasnash/article/details/135513906
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:chenni525@qq.com进行投诉反馈,一经查实,立即删除!