详解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 相关文章推荐
JS 巧妙获取剪贴板数据 Excel数据的粘贴
Jul 09 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
Apr 15 Javascript
Javascript面象对象成员、共享成员变量实验
Nov 19 Javascript
iphone safari不支持position fixed的解决方法
May 04 Javascript
JavaScript中的some()方法使用详解
Jun 09 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
Sep 07 Javascript
Jquery 垂直多级手风琴菜单附源码下载
Nov 17 Javascript
JS触摸事件、手势事件详解
May 04 Javascript
Angularjs 事件指令详细整理
Jul 27 Javascript
js+html5生成自动排列对话框实例
Oct 09 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
May 30 Javascript
Vue+Spring Boot简单用户登录(附Demo)
Nov 12 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插入中文到sqlserver 2008里出现乱码的解决办法分享
2012/07/19 PHP
Zend Framework教程之MVC框架的Controller用法分析
2016/03/07 PHP
Jquery操作Select 简单方便 一个js插件搞定
2009/11/12 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
javascript查询字符串参数的方法
2015/01/28 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
2016/03/10 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
requirejs + vue 项目搭建详解
2017/06/16 Javascript
vue router使用query和params传参的使用和区别
2017/11/13 Javascript
详解webpack之scss和postcss-loader的配置
2018/01/09 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
2018/07/10 Javascript
vue中的计算属性实例详解
2018/09/19 Javascript
JS Math对象与Math方法实例小结
2019/07/05 Javascript
JSONP 的原理、理解 与 实例分析
2020/05/16 Javascript
[01:33:59]真人秀《加油 DOTA》 第六期
2014/09/09 DOTA
在Django中创建第一个静态视图
2015/07/15 Python
python SSH模块登录,远程机执行shell命令实例解析
2018/01/12 Python
python提取照片坐标信息的实例代码
2019/08/14 Python
使用python无账号无限制获取企查查信息的实例代码
2020/04/17 Python
意大利香水和彩妆护肤品购物网站:Ditano
2017/08/13 全球购物
PHP中如何创建和修改数组
2012/05/02 面试题
介绍下WebSphere的安全性
2013/01/31 面试题
餐饮业会计岗位职责
2013/12/19 职场文书
道德模范先进事迹
2014/02/14 职场文书
小学班干部竞选演讲稿
2014/04/24 职场文书
国际政治学专业推荐信
2014/09/26 职场文书
个人作风建设总结
2014/10/23 职场文书
投标邀请书范本
2015/02/02 职场文书
人事专员岗位职责
2015/02/03 职场文书
幼儿园中秋节活动总结
2015/03/23 职场文书
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技
nginx设置资源请求目录的方式详解
2022/05/30 Servers