详解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阻止事件冒泡 event.stopPropagation
Dec 11 Javascript
javascript实现自动填写表单实例简析
Dec 02 Javascript
浅谈JavaScript的全局变量与局部变量
Jun 10 Javascript
JavaScript轮播图简单制作方法
Feb 20 Javascript
JS html时钟制作代码分享
Mar 03 Javascript
jquery自定义显示消息数量
Dec 19 jQuery
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
Dec 27 Javascript
使用 Node.js 开发资讯爬虫流程
Jan 07 Javascript
使用Vue制作图片轮播组件思路详解
Mar 21 Javascript
JS文件中加载jquery.js的实例代码
May 05 jQuery
JS字符串常用操作方法实例小结
Jun 24 Javascript
uniapp微信小程序:key失效的解决方法
Jan 20 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上的memcache和memcached两个pecl库
2010/03/29 PHP
PHP实现递归无限级分类
2015/10/22 PHP
php file_get_contents取文件中数组元素的方法
2017/04/01 PHP
PHP获取数组中单列值的方法
2017/06/10 PHP
PHP实现登陆并抓取微信列表中最新一组微信消息的方法
2017/07/10 PHP
JavaScript的类型转换(字符转数字 数字转字符)
2010/08/30 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
js实现图片上传并正常显示
2015/12/19 Javascript
jQuery实现图片文字淡入淡出效果
2015/12/21 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
TypeScript入门-基本数据类型
2017/03/28 Javascript
BootStrap selectpicker后台动态绑定数据
2017/06/01 Javascript
微信小程序 http请求的session管理
2017/06/07 Javascript
js实现加载页面就自动触发超链接的示例
2017/08/31 Javascript
如何编写一个d.ts文件的步骤详解
2018/04/13 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
node.js实现为PDF添加水印的示例代码
2018/12/05 Javascript
vue简单练习 桌面时钟的实现代码实例
2019/09/19 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
[05:35]DOTA2英雄梦之声_第13期_拉比克
2014/06/21 DOTA
Python类的基础入门知识
2008/11/24 Python
python复制与引用用法分析
2015/04/08 Python
详解python的数字类型变量与其方法
2016/11/20 Python
Python使用wxPython实现计算器
2018/01/30 Python
python3实现字符串的全排列的方法(无重复字符)
2018/07/07 Python
Python Celery多队列配置代码实例
2019/11/22 Python
Tensorflow 实现释放内存
2020/02/03 Python
python-docx文件定位读取过程(尝试替换)
2020/02/13 Python
Django models filter筛选条件详解
2020/03/16 Python
浅谈CSS3中display属性的Flex布局的方法
2017/08/14 HTML / CSS
WWE美国职业摔角官方商店:WWE Shop
2018/11/15 全球购物
大学应届生的自我评价
2014/03/06 职场文书
裁员通知
2015/04/25 职场文书
医院病假条怎么写
2015/08/17 职场文书
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android