详解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 Ajax 跨域访问的解决方案
Mar 12 Javascript
纯JavaScript实现的完美渐变弹出层效果代码
Apr 02 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
May 12 Javascript
在Python中使用glob模块查找文件路径的方法
Jun 17 Javascript
angularjs表格ng-table使用备忘录
Mar 09 Javascript
VUEJS实战之构建基础并渲染出列表(1)
Jun 13 Javascript
浅析如何利用JavaScript进行语音识别
Oct 27 Javascript
jQuery实现优雅的弹窗效果(6)
Feb 08 Javascript
vue项目中的webpack-dev-sever配置方法
Dec 14 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
Aug 28 Javascript
vue控制多行文字展开收起的实现示例
Oct 11 Javascript
在微信小程序中使用mqtt服务的方法
Dec 13 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
上海地方志办公室-上海电子仪表工业志
2021/03/04 无线电
php 网页游戏开发入门教程一(webgame+design)
2009/10/26 PHP
Laravel使用Queue队列的技巧汇总
2019/09/02 PHP
不使用中间变量,交换int型的 a, b两个变量的值。
2010/10/29 Javascript
jquery中:input和input的区别分析
2011/07/13 Javascript
js图片自动切换效果处理代码
2013/05/07 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
2013/10/09 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
2014/01/25 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
JavaScript中对JSON对象的基本操作示例
2016/05/21 Javascript
JavaScript中判断数据类型的方法总结
2016/05/24 Javascript
基于d3.js实现实时刷新的折线图
2016/08/03 Javascript
js cookie实现记住密码功能
2017/01/17 Javascript
基于JavaScript实现的顺序查找算法示例
2017/04/14 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
微信小程序 密码输入(源码下载)
2017/06/27 Javascript
Element-UI踩坑之Pagination组件的使用
2018/10/29 Javascript
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
2018/12/11 Javascript
微信内置浏览器图片查看器的代码实例
2019/10/08 Javascript
基于Python中求和函数sum的用法详解
2018/06/28 Python
使用django-guardian实现django-admin的行级权限控制的方法
2018/10/30 Python
对Pyhon实现静态变量全局变量的方法详解
2019/01/11 Python
Python实现堡垒机模式下远程命令执行操作示例
2019/05/09 Python
Python判断字符串是否xx开始或结尾的示例
2019/08/08 Python
PYTHON EVAL的用法及注意事项解析
2019/09/06 Python
django序列化serializers过程解析
2019/12/14 Python
Python内置数据类型list各方法的性能测试过程解析
2020/01/07 Python
《口技》教学反思
2014/02/21 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
导游欢迎词范文
2015/01/23 职场文书
2015年医生个人工作总结
2015/04/25 职场文书
教师节联欢会主持词
2015/07/04 职场文书
2016年寒假见闻
2015/10/10 职场文书
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL
Android 中的类文件和类加载器详情
2022/06/05 Java/Android