详解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 相关文章推荐
从数据结构的角度分析 for each in 比 for in 快的多
Jul 07 Javascript
JQUERY dialog的用法详细解析
Dec 19 Javascript
javascript中setAttribute()函数使用方法及兼容性
Jul 19 Javascript
解析JavaScript的ES6版本中的解构赋值
Jul 28 Javascript
浅析Javascript ES6新增值比较函数Object.is
Aug 24 Javascript
Angularjs 依赖压缩及自定义过滤器写法
Feb 04 Javascript
xmlplus组件设计系列之树(Tree)(9)
May 02 Javascript
使用webpack搭建react开发环境的方法
May 15 Javascript
微信开发之微信jssdk录音功能开发示例
Oct 22 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 Javascript
jquery添加div实现消息聊天框
Feb 08 jQuery
JavaScript实现打字游戏
Feb 19 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 header Content-Type类型小结
2011/07/03 PHP
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
PHP准确取得服务器IP地址的方法
2015/06/02 PHP
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
PHP日志LOG类定义与用法示例
2018/09/06 PHP
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
2010/10/26 Javascript
精选的10款用于构建良好易用性网站的jQuery插件
2011/01/23 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
javascript数组操作总结和属性、方法介绍
2014/04/05 Javascript
node.js中的fs.fsync方法使用说明
2014/12/15 Javascript
浅谈javascript中的instanceof和typeof
2015/02/27 Javascript
JS实现样式清新的横排下拉菜单效果
2015/10/09 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
最基础的vue.js双向绑定操作
2017/08/23 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
2017/12/05 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
2018/10/29 Javascript
webpack HappyPack实战详解
2019/10/08 Javascript
vue视频播放插件vue-video-player的具体使用方法
2019/11/08 Javascript
js实现ajax的用户简单登入功能
2020/06/18 Javascript
vue实现选中效果
2020/10/07 Javascript
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
收藏整理的一些Python常用方法和技巧
2015/05/18 Python
Centos7 Python3下安装scrapy的详细步骤
2018/03/15 Python
Django密码存储策略分析
2020/01/09 Python
基于TensorFlow中自定义梯度的2种方式
2020/02/04 Python
Python迭代器协议及for循环工作机制详解
2020/07/14 Python
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
违反课堂纪律检讨书
2014/01/19 职场文书
咖啡蛋糕店创业计划书
2014/01/28 职场文书
小学敬老月活动方案
2014/02/11 职场文书
施工质量承诺书范文
2014/05/30 职场文书
大学生党员自我评价
2015/03/04 职场文书
干货!开幕词的写作方法
2019/04/02 职场文书
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python