详解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 相关文章推荐
JQuery 前台切换网站的样式实现
Jun 22 Javascript
Jquery AJAX 框架的使用方法
Nov 03 Javascript
读jQuery之四(优雅的迭代)
Jun 20 Javascript
js判断两个日期是否相等的方法
Sep 10 Javascript
探讨js字符串数组拼接的性能问题
Oct 11 Javascript
浅析JS运动
Dec 28 Javascript
jquery按回车键实现表单提交的简单实例
May 25 Javascript
微信小程序 出现47001 data format error原因解决办法
Mar 10 Javascript
详解JavaScript对象的深浅复制
Mar 30 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
May 06 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
Sep 25 Javascript
Ant-design-vue Table组件customRow属性的使用说明
Oct 28 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
怎么使 Mysql 数据同步
2006/10/09 PHP
分享8个最佳的代码片段在线测试网站
2013/06/29 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
PHP中echo与print区别点整理
2021/03/09 PHP
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
2007/03/06 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
写JQuery插件的基本知识
2013/11/25 Javascript
一个js控制的导航菜单实例代码
2013/12/03 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
2015/12/07 Javascript
详解JavaScript数组和字符串中去除重复值的方法
2016/03/07 Javascript
Nodejs+express+ejs简单使用实例代码
2017/09/18 NodeJs
async/await让异步操作同步执行的方法详解
2019/11/01 Javascript
浅谈vue中resetFields()使用注意事项
2020/08/12 Javascript
python基础教程之udp端口扫描
2014/02/10 Python
Python2.x中str与unicode相关问题的解决方法
2015/03/30 Python
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
在Python的框架中为MySQL实现restful接口的教程
2015/04/08 Python
python使用webdriver爬取微信公众号
2018/08/31 Python
python中的colorlog库使用详解
2019/07/05 Python
关于django 1.10 CSRF验证失败的解决方法
2019/08/31 Python
使用pytorch实现可视化中间层的结果
2019/12/30 Python
浅谈图像处理中掩膜(mask)的意义
2020/02/19 Python
python 判断一组数据是否符合正态分布
2020/09/23 Python
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
2021/02/22 Python
html5的localstorage详解
2017/05/09 HTML / CSS
Bogner美国官网:滑雪服中的”Dior”
2018/01/30 全球购物
十佳青年个人事迹材料
2014/01/28 职场文书
采购助理岗位职责
2014/02/16 职场文书
绿色家庭事迹材料
2014/05/01 职场文书
工业设计专业自荐书
2014/06/05 职场文书
孕妇离婚协议书范本
2014/11/20 职场文书
2014年外贸业务员工作总结
2014/12/11 职场文书
2015公务员试用期工作总结
2014/12/12 职场文书
2016年读书月活动总结范文
2016/04/06 职场文书
Python3.8官网文档之类的基础语法阅读
2021/09/04 Python