/*
* broadcast 事件广播
* @param {componentName} 组件名称
* @param {eventName} 事件名
* @param {params} 参数
* 遍历寻找所有子孙组件,假如子孙组件和componentName组件名称相同的话,则触发$emit的事件方法,数据为 params.
* 如果没有找到 则使用递归的方式 继续查找孙组件,直到找到为止,否则继续递归查找,直到找到最后一个都没有找到为止。
*/
function broadcast(componentName, eventName, params) {
this.$children.forEach(child => {
var name = child.$options.name; if (name === componentName) {
child.$emit.apply(child, [eventName].concat(params));
} else {
broadcast.apply(child, [componentName, eventName].concat([params]));
}
});
} /*
* dispatch 查找所有父级,直到找到要找到的父组件,并在身上触发指定的事件。
* @param { componentName } 组件名称
* @param { eventName } 事件名
* @param { params } 参数
*/
function dispatch(componentName, eventName, params) {
var parent = this.$parent || this.$root;
var name = parent.$options.name; while (parent && (!name || name !== componentName)) {
parent = parent.$parent; if (parent) {
name = parent.$options.name;
}
}
if (parent) {
parent.$emit.apply(parent, [eventName].concat(params));
}
} export default {
methods: {
$$dispatch(componentName, eventName, params) {
dispatch.call(this, componentName, eventName, params)
},
$$broadcast(componentName, eventName, params) {
broadcast.call(this, componentName, eventName, params);
}
}
};

以上代码可当做全局混入mixins使用,使用Vue.mixin(emitter)注册。

即在main.js中引入:

import emitter from '@/mixins/emitter.js'

Vue.mixin(emitter)

小tips:vue2中broadcast和dispatch的实现的更多相关文章

  1. vue2.0 broadcast和dispatch的理解

    阅读目录 vue2 broadcast和dispatch的理解 回到顶部 vue2 broadcast和dispatch的理解 /* broadcast 事件广播 @param {componentN ...

  2. Vue框架Element的事件传递broadcast和dispatch方法分析

    前言 最近在学习饿了么的Vue前端框架Element,发现其源码中大量使用了$broadcast和$dispatch方法,而Element使用的是Vue2.0版本,众所周知在Vue 1.0升级到2.0 ...

  3. 你不知道的JavaScript--Item17 循环与prototype最后的几点小tips

    1.优先使用数组而不是Object类型来表示有顺序的集合 ECMAScript标准并没有规定对JavaScript的Object类型中的属性的存储顺序. 但是在使用for..in循环对Object中的 ...

  4. keras搭建深度学习模型的一些小tips

    定义模型两种方法:  1.sequential 类仅用于层的线性堆叠,这是目前最常用的网络架构 2.函数式API,用于层组成的有向无环图,让你可以构建任意形式的架构 from keras import ...

  5. 整理一些《纸书科学计算器》的小Tips

    本文最开始是在2016年的文章 Win10应用<纸书科学计算器>更新啦! 发表之后撰写的,当时那篇文章收到了不少人点赞,应用在国内市场的日下载量也突然上涨,让我感到受宠若惊,这里要感谢Wp ...

  6. 最近工作的一点小tips

    最近工作比较忙,但也积累了一些小tips,比较杂,不成系统,也并不很深入,就开一篇笼统的先记录一下,以后再深入挖掘. 1.-webkit-tap-highlight-color -webkit-tap ...

  7. Unity3D性能优化小tips——把this.transform缓存缓存起来

    Unity3D开发时中有一个小tips,这在官方的文档里其实有提及的,但不那么显眼,这里小说一下: 在MonoBehaviour进行编程时,我们经常会用this.transform, this.gam ...

  8. Vue2中实现微信分享支付功能

    Vue2中实现微信分享支付功能  近期做了一个微信公众号前后分离项目,前端采用Vue2开发,后端SpringBoot,今天迫不及待的来给大家分享一下这次在开发中遇到的一些坑以及解决办法. 在这里,一些 ...

  9. 小tips: zoom和transform:scale的区别

    小tips: zoom和transform:scale的区别 转自 张鑫旭 前端大神 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://w ...

  10. 前端必备,5大mock省时提效小tips,用了提前下班一小时

    ​ 一.一些为难前端的业务场景 在我的工作经历里,需要等待后端童鞋配合我的情形大概有以下几种: a.我们跟外部有项目合作,需要调用到第三方接口. 一般这种情况下,商务那边谈合同,走流程,等第三方审核, ...

随机推荐

  1. ArchSummit回顾:从云原生到实时数据湖,架构如何支撑业务发展

    [点击了解更多网易热点] 数字化.自动化.智能化的主旋律下,架构的进化也在提速.在近日举办的ArchSummit全球架构师峰会上,网易数帆高级技术专家.资深架构师裴斐和网易数帆高级技术专家周劲松分别分 ...

  2. 在Django中查找重复项目

    在Django中查找重复项目通常涉及使用查询集(QuerySet)和模型(Model).假设你有一个模型,比如Item,你想查找其中重复的项目,可以通过以下步骤来实现: 确定重复的标准: 首先需要确定 ...

  3. oeasy教您玩转vim - 33 - # 查找文本

    ​ 文字区块 回忆上节课内容 括号间跳转 成对括号间跳转 % 不成对括号间跳转 [( 跳转到上一个没配对的 ( [) 跳转到下一个没配对的 ) [{ 跳转到上一个没配对的 { [} 跳转到下一个没配对 ...

  4. Docker Engine在Centos下的安装

    实践环境 Centos7.8 先决条件 CentOS 7.8. 必须开启 centos-extrasyum仓库源.默认是开启的,如果关闭了,需要重新开启,如下 编辑 /etc/yum.repos.d/ ...

  5. __int128的输入输出(快读快输)

    引言:__int128不能用\(cin\)\(cout\)或\(scanf\)\(printf\). 快读 思想:把每一个字符读入,组成数字. int read(){ int x = 0,y = 1; ...

  6. static个人理解

    static解:主要用于内存管理,static关键字的方法不需要new对象就可以直接在同static内进行调用,在其他类中可直接通过类名进行变量的访问.static关键字属于类,不是类的实例.成员分为 ...

  7. Could not retrieve mirrorlist http://mirrorlist.centos.org/?release=7&arch=x86_64&repo=os&infra=stock error was 14: curl#6 - "Could not resolve host: mirrorlist.centos.org; 未知的错误"解决yum下载报错

    报错信息 │ (SSH client, X server and network tools) │ │ │ │ ⮞ SSH session to root@192.168.117.166 │ │ • ...

  8. 【RabbitMQ】12 日志监控 & 消息追踪

    一.日志和监控 RabbitMQ日志存放目录 [root@localhost ~]# ll /var/log/rabbitmq/ 总用量 176 -rw-r-----. 1 rabbitmq rabb ...

  9. 带有最小间隔时间的队列读取实现 —— 最小等待时间的队列 —— Python编程(续)

    接前文: 带有最小间隔时间的队列读取实现 -- 最小等待时间的队列 -- Python编程 由于上次的设计多少有些简单,这里对此丰富一下. ============================== ...

  10. 【转载】 推荐系统 EE 问题与 Bandit 算法

    原文地址: https://toutiao.io/posts/584etm/preview ------------------------------------------------------ ...