Vue.js解析(十一)【说说element组件库broadcast与dispatch】
周所周知,Vue在2.0版本中去除了broadcast方法以及broadcast方法以及dispatch方法,最近在学习饿了么的Element时重新实现了这两种方法,并以minix的方式引入。
看一下源代码
function broadcast(componentName, eventName, params) {/*遍历当前节点下的所有子组件*/this.$children.forEach(child => {/*获取子组件名称*/var name = child.$options.componentName;if (name === componentName) {/*如果是我们需要广播到的子组件的时候调用$emit触发所需事件,在子组件中用$on监听*/child.$emit.apply(child, [eventName].concat(params));} else {/*非所需子组件则递归遍历深层次子组件*/broadcast.apply(child, [componentName, eventName].concat([params]));}});
}
export default {methods: {/*对多级父组件进行事件派发*/dispatch(componentName, eventName, params) {/*获取父组件,如果以及是根组件,则是$root*/var parent = this.$parent || this.$root;/*获取父节点的组件名*/var name = parent.$options.componentName;while (parent && (!name || name !== componentName)) {/*当父组件不是所需组件时继续向上寻找*/parent = parent.$parent;if (parent) {name = parent.$options.componentName;}}/*找到所需组件后调用$emit触发当前事件*/if (parent) {parent.$emit.apply(parent, [eventName].concat(params));}},/*向所有子组件进行事件广播。这里包了一层,为了修改broadcast的this对象为当前Vue实例*/broadcast(componentName, eventName, params) {broadcast.call(this, componentName, eventName, params);}}
};
其实这里的broadcast与dispatch实现了一个定向的多层级父子组件间的事件广播及事件派发功能。完成多层级分发对应事件的组件间通信功能。
broadcast通过递归遍历子组件找到所需组件广播事件,而dispatch则逐级向上查找对应父组件派发事件。
broadcast需要三个参数,componentName(组件名),componentName(事件名称)以及params(数据)。根据componentName深度遍历子组件找到对应组件emit事件eventName。
dispatch同样道理,需要三个参数,componentName(组件名),componentName(事件名称)以及params(数据)。根据componentName向上级一直寻找对应父组件,找到以后emit事件eventName。
Vue.js解析(十一)【说说element组件库broadcast与dispatch】相关推荐
- 初探 amaze-vue( 基于vue.js封装的Amaze UI 组件库)
Amaze UI 是以移动优先(Mobile first)为理念,面向 HTML5 开发的国产优秀组件库.因官方未提供vue.js版本,而且民间一直对vue.js版本的 Amaze UI 组件库呼声很 ...
- 【Vue.js】Vue.js中常用的UI组件库和Vue Router
1.Vue生态中常用的UI组件库 1. vant 介绍 轻量级.可靠的移动端 Vue 组件库 有赞前端团队出品 GitHub地址:https://github.com/youzan/vant 特性 拥 ...
- Vue.js(十) element-ui PC端组件库
一:简介 饿了么公司基于Vue开发了两套UI组件库,PC端组件库 和 移动端组件库. 一部分组件库是对原生的HTML标签元素的封装,增加了一些新的功能. 另一部分组件库是原生HTML标签元素没有的,是 ...
- Vue.js解析(十)【Vue组件间通信】
什么是Vue组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊 ...
- Element 2.6.0 发布,基于 Vue 2.0 的桌面端组件库
开发四年只会写业务代码,分布式高并发都不会还做程序员? Element 2.6.0 发布了,Element 是一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,提供了配套设 ...
- Vue 3的高颜值UI组件库
Vue 3.0 已经发布两年多的时间,今年 2 月 Vue 3.0 也正式成为新的默认版本.今天就来分享 7 个适用于 Vue 3 的高颜值 UI 组件库! Element Plus Element ...
- vue.js仿微信聊天窗口展示组件
原链接:https://www.jianshu.com/p/0faf8e78d0a5 源码:https://github.com/doterlin/vue-wxChat 演示地址:https://do ...
- Vue.js中的8种组件间的通信方式;3个组件实例是前6种通信的实例,组件直接复制粘贴即可看到运行结果
文章目录 一.$children / $parent 二.props / $emit 三.eventBus 四.ref 五.provide / reject 六.$attrs / $listeners ...
- Web核心技术之Element组件库学习及综合案例
2,Element Element:是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库,用于快速构建网页. Element 提供了很多组件(组成网页的部件)供我们使用.例如 超链接.按钮.图 ...
最新文章
- 《深入理解计算机系统》读书随笔-位操作
- 两年AI研究经验(教训)总结,进来看看吧!
- 谷歌chrome浏览器的源码分析(三)
- Python(39)_选出列表中的大于66的数字放在字典中
- plsql(轻量版)-存储函数存储过程
- 【java】从进程角度理解java
- SpringBoot-异常处理
- Python中的字符串特性(索引、切片、重复、连接、成员操作符号)
- 方法不对,啥都学不会!90%的Python工程师都输在这点上!
- 浏览器数据库 IndexedDB(一) 概述
- UVA10229 Modular Fibonacci 【循环数列】
- tensorflow分布式运行
- word文档里怎么撤回上一步的操作
- 2016计算机cpu,CPU怎么看性能?CPU天梯图2016最新版 (全文)
- C数据结构排序算法——希尔排序法用法总结(转http://www.cnblogs.com/skywang12345/p/3597597.html)...
- 计算机二级考试C语言编程解读:统计N名学生的成绩
- ALEVEL经济ESSAY题写作技巧
- JQ实现一个放大镜效果
- 关于STM32F105/107时钟配置详解
- Websocket安装说明
热门文章
- 名片扫描通ScanZen 中的URL AutoCorrect
- 解决 Eclipse 项目中有红色感叹号的详细方法(图文)
- 微信小程序预览报错80058
- 大学计算机科学的内容,本科读宾夕法尼亚大学计算机科学专业学什么内容?
- 阿*无(感)痕验证acw_sc__v3逆向逻辑思路
- vue页面引入另一个页面
- iOS开发 常用的框架demo
- 笔记:AI芯片的未来创新方向
- GitLab提交代码SSL证书过期解决
- mysql错误代码: 1060 Duplicate column name ‘sno‘