详解Vue实战指南之依赖注入(provide/inject)


Posted in Javascript onNovember 13, 2018

案例

UI美眉说咱家的选项菜单太丑了,小哥哥能不能美化一下呀,洒家自然是说小意思啦~

自定义一个select组件,so easy~

简单粗暴型:

<el-select v-model="favourite" :option="[]"></el-select>

option作为数据进来就ok啦。

然后发现下列问题:

  • key-value,不是所有的接口都是id-name
  • option要disabled 怎么办?
  • option存在几种情况怎么办?
  • ...

回头看看原生的写法是这样:

<select v-model="favourite">
 <option value="1">Vue</option>
 <option value="2">React</option>
 <option value="3">Angular</option>
</select>

还要加个el-option组件,灵活自由型:

<el-select v-model="favourite">
 <el-option value="1">Vue</el-option>
 <el-option value="2">React</el-option>
 <el-option value="3">Angular</el-option>
</el-select>

好啦,这样设计就能完美解决之前的几个问题。

接着要解决选择了某一个el-option,怎么告诉el-select,$parent是一种选择,那么el-select当前的值又怎么告诉el-option你被选中了呢~ 笔者没有继续去深究,因为看到了APIprovide/inject

官方说明:

允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深(这也是使用$parent不好实现的地方),并在起上下游关系成立的时间里始终生效。
不论组件层次有多深,这个简直太爽了,不用再关心dom层级,只要在祖先组件内部就可以一直使用祖先组件提供的provide

用法

下面贴出一部分select的实现:

  • provide:Object | () => Object
  • inject:Array<string> | { [key: string]: string | Symbol | Object }

el-select

export default {
 name: "el-select",
 provide() {
 return {
 select: this
 };
 }
}

el-option

export default {
 name:'el-option',
 inject:['select'],
 created(){
 if(this.select.value===this.value){
 this.select.label=this.label;
 }
 }
}

总结

provide/inject 是解决组件之间的通信问题的利器,不受层级结构的限制。

但也不是随便去滥用,通信代表着耦合:

provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

官方文档:

https://cn.vuejs.org/v2/api/#provide-inject
https://cn.vuejs.org/v2/guide/components-edge-cases.html#%E4%BE%9D%E8%B5%96%E6%B3%A8%E5%85%A5

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

Javascript 相关文章推荐
javascript 硬盘序列号+其它硬件信息
Dec 23 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
May 02 Javascript
js实现最短的XML格式化工具实例
Mar 12 Javascript
js兼容火狐获取图片宽和高的方法
May 21 Javascript
你不知道的高性能JAVASCRIPT
Jan 18 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
Apr 29 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
Apr 30 Javascript
浅谈layui分页控件field参数接收对象的问题
Sep 20 Javascript
JS原型和原型链原理与用法实例详解
Feb 05 Javascript
Javascript原生ajax请求代码实例
Feb 20 Javascript
vue开发移动端底部导航条功能
Apr 08 Javascript
JS使用Chrome浏览器实现调试线上代码
Jul 23 Javascript
node.js爬取中关村的在线电瓶车信息
Nov 13 #Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
Nov 13 #Javascript
详解Vue组件插槽的使用以及调用组件内的方法
Nov 13 #Javascript
Vue实现一个无限加载列表功能
Nov 13 #Javascript
Vue实现移动端页面切换效果【推荐】
Nov 13 #Javascript
vue中slot(插槽)的介绍与使用
Nov 12 #Javascript
vuex的module模块用法示例
Nov 12 #Javascript
You might like
php获取文件类型和文件信息的方法
2015/07/10 PHP
实现PHP搜索加分页
2016/10/12 PHP
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
一个加载js文件的小脚本
2007/06/28 Javascript
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
一段批量给页面上的控件赋值js
2010/06/19 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
2012/05/03 Javascript
thinkphp中常用的系统常量和系统变量
2014/03/05 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
2015/10/27 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
2016/03/11 Javascript
用JS实现轮播图效果(二)
2016/06/26 Javascript
AngularJS入门教程之链接与图片模板详解
2016/08/19 Javascript
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
2018/05/08 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
2019/05/21 Javascript
js实现多张图片每隔一秒切换一张图片
2019/07/29 Javascript
探索node之事件循环的实现
2020/10/30 Javascript
k8s node节点重新加入master集群的实现
2021/02/22 Javascript
Python文件夹与文件的相关操作(推荐)
2016/07/25 Python
Python File readlines() 使用方法
2018/03/19 Python
对Python多线程读写文件加锁的实例详解
2019/01/14 Python
Python2.7版os.path.isdir中文路径返回false的解决方法
2019/06/21 Python
Python实现获取当前目录下文件名代码详解
2020/03/10 Python
Python基于BeautifulSoup爬取京东商品信息
2020/06/01 Python
vscode配置anaconda3的方法步骤
2020/08/08 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
使用CSS3实现圆角,阴影,透明
2014/12/23 HTML / CSS
谈谈对css属性box-sizing的了解
2017/01/04 HTML / CSS
TobyDeals美国:在电子产品上获得最好的优惠和折扣
2019/08/11 全球购物
莫斯科的韩国化妆品店:Sifo
2019/12/04 全球购物
酒店前厅员工辞职信
2014/01/08 职场文书
团组织关系介绍信
2014/01/12 职场文书
单身联谊活动方案
2014/01/29 职场文书
python机器学习创建基于规则聊天机器人过程示例详解
2021/11/02 Python