详解Vue 多级组件透传新方法provide/inject


Posted in Javascript onMay 09, 2018

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQUERY THICKBOX弹出层插件
Aug 30 Javascript
js函数调用常用方法详解
Dec 03 Javascript
table insertRow、deleteRow定义和用法总结
May 14 Javascript
JS时间特效最常用的三款
Aug 19 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
Mar 24 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
Aug 06 Javascript
JavaScript通过filereader接口读取文件
May 10 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
Apr 12 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
Apr 22 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
Sep 02 Javascript
JavaScript中关于预编译、作用域链和闭包的理解
Mar 31 Javascript
react中的DOM操作实现
Jun 30 Javascript
自定义vue组件发布到npm的方法
May 09 #Javascript
React Navigation 使用中遇到的问题小结
May 08 #Javascript
官方推荐react-navigation的具体使用详解
May 08 #Javascript
JavaScript callback回调函数用法实例分析
May 08 #Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
May 08 #Javascript
vue-cli 引入、配置axios的方法
May 08 #Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
May 08 #Javascript
You might like
探讨:如何编写PHP扩展
2013/06/13 PHP
destoon调用企业会员公司形象图片的实现方法
2014/08/21 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
PHP Primary script unknown 解决方法总结
2019/08/22 PHP
js 分栏效果实现代码
2009/08/29 Javascript
js 手机号码合法性验证代码集合
2012/09/29 Javascript
jquery实现excel导出的方法
2013/04/04 Javascript
js为空或不是对象问题的快速解决方法
2013/12/11 Javascript
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
让IE8浏览器支持function.bind()方法
2014/10/16 Javascript
jQuery插件pagination实现分页特效
2015/04/12 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
2015/08/25 Javascript
Javascript简单实现面向对象编程继承实例代码
2015/11/27 Javascript
JS实现列表的响应式排版(推荐)
2016/09/01 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
详解使用React全家桶搭建一个后台管理系统
2017/11/04 Javascript
深入浅析var,let,const的异同点
2018/08/07 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
2018/09/11 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
2020/09/11 Javascript
如何在vue中使用HTML 5 拖放API
2021/01/14 Vue.js
如何管理Vue中的缓存页面
2021/02/06 Vue.js
Python创建系统目录的方法
2015/03/11 Python
python获取本机mac地址和ip地址的方法
2015/04/29 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
HTML5 Canvas的事件处理介绍
2015/04/24 HTML / CSS
美国第二大连锁书店:Books-A-Million
2017/12/28 全球购物
中专生自我鉴定范文
2013/12/19 职场文书
可贵的沉默教学反思
2014/02/06 职场文书
《歌唱二小放牛郎》教学反思
2014/04/19 职场文书
小学教师个人先进事迹材料
2014/05/17 职场文书
公司股东出资证明书
2014/11/01 职场文书
评先进个人材料
2014/12/29 职场文书
美德少年主要事迹材料
2015/11/04 职场文书
基于MySql验证的vsftpd虚拟用户
2021/11/07 MySQL
详细介绍python操作RabbitMq
2022/04/12 Python