详解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的bankInput银行卡账号格式化
Aug 22 Javascript
javascript object array方法使用详解
Dec 03 Javascript
用jQuery获取IE9下拉框默认值问题探讨
Jul 22 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
Apr 22 Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
Dec 24 Javascript
关于javascript获取内联样式与嵌入式样式的实例
Jun 01 Javascript
微信小程序支付前端源码
Aug 29 Javascript
基于Koa2写个脚手架模拟接口服务的方法
Nov 27 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 Javascript
深入理解webpack process.env.NODE_ENV配置
Feb 23 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
Aug 10 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/03 咖啡文化
php操作SVN版本服务器类代码
2011/11/27 PHP
php中http与https跨域共享session的解决方法
2014/12/20 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
接收键盘指令的脚本
2006/06/26 Javascript
Javascript实例教程(19) 使用HoTMetal(3)
2006/12/23 Javascript
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
多个js与css文件的合并方法详细说明
2012/12/26 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
2013/02/07 Javascript
css配合jquery美化 select
2013/11/29 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
原生JS下拉加载插件分享
2016/12/26 Javascript
javascript中BOM基础知识总结
2017/02/14 Javascript
Vue2.0 从零开始_环境搭建操作步骤
2017/06/14 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
Vue使用axios出现options请求方法
2019/05/30 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
2020/06/05 Javascript
在Vuex中Mutations修改状态操作
2020/07/24 Javascript
vue实现轮播图帧率播放
2021/01/26 Vue.js
[00:35]DOTA2上海特级锦标赛 Newbee战队宣传片
2016/03/03 DOTA
Python3正则匹配re.split,re.finditer及re.findall函数用法详解
2018/06/11 Python
Python按钮的响应事件详解
2019/03/04 Python
Django admin.py 在修改/添加表单界面显示额外字段的方法
2019/08/22 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
使用pytorch实现可视化中间层的结果
2019/12/30 Python
浅析Python 条件控制语句
2020/07/15 Python
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
英国假发网站:Hothair
2018/02/23 全球购物
职工运动会感言
2014/02/07 职场文书
酒店开业庆典主持词
2014/03/21 职场文书
党员三严三实心得体会
2014/10/13 职场文书
幼儿园庆元旦主持词
2015/07/06 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书
十大动画制作软件,Adobe产品上榜两款,第一是行业标准软件
2022/03/18 杂记
NoSQL优缺点与MongoDB数据库简介
2022/06/05 MongoDB