详解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 相关文章推荐
用js判断用户浏览器是否是XP SP2的IE6
Mar 08 Javascript
JavaScript 对Cookie 操作的封装小结
Dec 31 Javascript
javascript 精粹笔记
May 09 Javascript
js获取url参数代码实例分享(JS操作URL)
Dec 13 Javascript
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
vue组件间通信解析
Mar 01 Javascript
了解ESlint和其相关操作小结
May 21 Javascript
js中的 || 与 && 运算符详解
May 24 Javascript
微信小程序前端promise封装代码实例
Aug 24 Javascript
layui layer select 选择被遮挡的解决方法
Sep 21 Javascript
React 实现车牌键盘的示例代码
Dec 20 Javascript
JavaScript实现指定数量的并发限制的示例代码
Mar 10 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备份/还原MySQL数据库的代码
2011/01/06 PHP
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
jQuery EasyUI 中文API Layout(Tabs)
2010/04/27 Javascript
jQuery ajax 路由和过滤器使用说明
2011/08/02 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
2011/08/23 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
2012/06/29 Javascript
js如何调用qq互联api实现第三方登录
2014/03/28 Javascript
Jquery响应回车键直接提交表单操作代码
2014/07/25 Javascript
javascript感应鼠标图片透明度显示的方法
2015/02/24 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
js友好的时间返回函数
2016/08/24 Javascript
JS组件系列之JS组件封装过程详解
2017/04/28 Javascript
利用vue开发一个所谓的数独方法实例
2017/12/21 Javascript
Vue 中mixin 的用法详解
2018/04/23 Javascript
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
js通过循环多张图片实现动画效果
2019/12/19 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
2020/07/09 Javascript
js实现简易ATM功能
2020/10/27 Javascript
Python编码类型转换方法详解
2016/07/01 Python
Python实现简单过滤文本段的方法
2017/05/24 Python
Python3.4编程实现简单抓取爬虫功能示例
2017/09/14 Python
python3爬取数据至mysql的方法
2018/06/26 Python
Python使用pyodbc访问数据库操作方法详解
2018/07/05 Python
如何基于pythonnet调用halcon脚本
2020/01/20 Python
Python3 读取Word文件方式
2020/02/13 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
基于python实现对文件进行切分行
2020/04/26 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
中国专业的综合网上购物商城:京东
2016/08/02 全球购物
非凡女性奢华谦虚风格:The Modist
2017/10/28 全球购物
皇家道尔顿官网:Royal Doulton
2017/12/06 全球购物
银行开户授权委托书格式
2014/10/10 职场文书
2015国庆节感想
2015/08/04 职场文书
Python答题卡识别并给出分数的实现代码
2021/06/22 Python
Ajax异步刷新功能及简单案例
2021/11/20 Javascript