详解Vue 多级组件透传新方法provide/inject
作者:敖天羽 时间:2024-06-05 09:21:03
provide / inject 是 2.2 新增的方法,可以以一个祖先组件向所有子孙后代注入依赖(一个内容)。
provider/inject:简单的来说就是在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量。
Vue 官方警告:
provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。
当然,警告只是警告,你完全可以正常使用。
使用方法非常像 data 和 props 的组合大礼包:
var Provider = {
provide: {
foo: 'bar'
},
// ...
}
var Child = {
inject: ['foo'],
created () {
console.log(this.foo) // => "bar"
}
// ...
}
唯一的区别是你不用再一层层的传入了,过去用的 event-bus 虽然可以解决深层问题,但是会导致整个 event-emit 组成过于混乱,难以维护。使用 provide / inject 可以保证父子单向数据流的清晰性。
在 React 中 Context 的 Provider / Consumer 也有相同的效果,由于还没有具体使用过,对 React 本身也只有一面之缘,留待以后在了解,感兴趣的同学可以 阅读文档 了解。
参考文章:
Vue 官方文档
Provide/Inject in Vue 2.2
来源:https://codesky.me/archives/vue-provide-inject.wind
标签:vue,provide,inject
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
django注册用邮箱发送验证码的实现
2022-11-08 06:59:59
python中 OpenCV和Pillow处理图像操作及时间对比
2021-02-04 16:46:52
Windows下python3安装tkinter的问题及解决方法
2023-03-30 11:45:31
Oracle中锁(lock)的用法
2024-01-12 17:22:49
![](https://img.aspxhome.com/file/2023/9/65229_0s.png)
Python简单实现两个任意字符串乘积的方法示例
2023-10-29 12:04:40
分享几种python 变量合并方法
2023-09-27 12:59:02
PHP读取文本文件并逐行输出该行使用最多的字符与对应次数的方法
2024-05-11 10:09:43
position:relative/absolute无法冲破的等级
2007-05-11 17:03:00
django views重定向到带参数的url
2023-08-18 14:56:47
go 对象池化组件 bytebufferpool使用详解
2024-02-10 14:26:11
PIL对上传到Django的图片进行处理并保存的实例
2023-04-03 12:40:04
Oracle数据库编写有效事务指导方针
2009-03-19 17:41:00
一步一步教你网站同步镜像(转载)
2024-01-21 03:38:11
js处理自己不能定义二维数组的方法详解
2023-09-06 21:25:12
Python中模块的使用--binascii模块用法
2022-11-16 13:53:16
vue实现页面添加水印
2024-05-10 14:19:59
![](https://img.aspxhome.com/file/2023/6/126406_0s.jpg)
Python+Pygame实现怀旧游戏飞机大战
2023-09-27 03:36:52
python导出chrome书签到markdown文件的实例代码
2022-08-26 00:49:36
caffe的python接口绘制loss和accuracy曲线
2021-06-15 23:54:21
![](https://img.aspxhome.com/file/2023/6/101476_0s.jpg)
找到个很好的例子导出excel的
2008-09-28 13:12:00