详解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 实用的文字链提示框效果
Jun 30 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
Nov 09 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
Jun 09 Javascript
jQuery中wrapAll()方法用法实例
Jan 16 Javascript
JS实现从网页顶部掉下弹出层效果的方法
Aug 06 Javascript
学习javascript面向对象 理解javascript对象
Jan 04 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
Sep 26 Javascript
JS新包管理工具yarn和npm的对比与使用入门
Dec 09 Javascript
vue中使用gojs/jointjs的示例代码
Aug 24 Javascript
vuex 中插件的编写案例解析
Jun 10 Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 Javascript
JavaScript中展开运算符及应用的实例代码
Jan 14 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学习笔记之二 php入门知识
2011/01/12 PHP
thinkPHP商城公告功能开发问题分析
2016/12/01 PHP
PHP中单例模式与工厂模式详解
2017/02/17 PHP
解决安装WampServer时提示缺少msvcr110.dll文件的问题
2017/07/09 PHP
js 图片缩放(按比例)控制代码
2009/05/27 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
2011/03/03 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
2013/01/11 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
JavaScript将数组转换成CSV格式的方法
2015/03/19 Javascript
基于Turn.js 实现翻书效果实例解析
2016/06/20 Javascript
jQuery事件与动画基础详解
2017/02/23 Javascript
浅谈react+es6+webpack的基础配置
2017/08/09 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
2017/08/31 Javascript
vue实现与安卓、IOS交互的方法
2018/11/02 Javascript
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
2020/07/07 Javascript
如何管理Vue中的缓存页面
2021/02/06 Vue.js
将字典转换为DataFrame并进行频次统计的方法
2018/04/08 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
python 读取文件并替换字段的实例
2018/07/12 Python
python next()和iter()函数原理解析
2020/02/07 Python
Matplotlib使用Cursor实现UI定位的示例代码
2020/03/12 Python
【HTML5】3D模型--百行代码实现旋转立体魔方实例
2016/12/16 HTML / CSS
美国最大的珠宝首饰网上商城:Jewelry.com
2016/07/22 全球购物
英国时尚家具、家居饰品及礼品商店:Graham & Green
2016/09/15 全球购物
应届生文秘专业个人自荐信格式
2013/09/21 职场文书
外贸公司实习自我鉴定
2013/09/24 职场文书
求职推荐信
2013/10/28 职场文书
支行行长竞聘演讲稿
2014/05/15 职场文书
解除劳动关系协议书范文
2014/09/11 职场文书
大学生党员批评与自我批评范文
2014/10/14 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书
2015年社区消防安全工作总结
2015/10/14 职场文书
详解JAVA中的OPTIONAL
2021/06/14 Java/Android
在redisCluster中模糊获取key方式
2021/07/09 Redis