/*
broadcast 事件广播
@param {componentName} 组件名称
@param {eventName} 事件名
@param {params} 参数
遍历寻找所有子孙组件,假如子孙组件和componentName组件名称相同的话,则触发$emit的事件方法,数据为 params.
如果没有找到 则使用递归的方式 继续查找孙组件,直到找到为止,否则继续递归查找,直到找到最后一个都没有找到为止。
*/
function broadcast(componentName, eventName, params) {
this.$children.forEach(child => {
const 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 } 参数
*/
export default {
methods: {
dispatch(componentName, eventName, params) {
let parent = this.$parent || this.$root;
let 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));
}
},
broadcast(componentName, eventName, params) {
broadcast.call(this, componentName, eventName, params);
}
}
};

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. vue之自行实现派发与广播-dispatch与broadcast

    要解决的问题 主要针对组件之间的跨级通信 为什么要自己实现dispatch与broadcast? 因为在做独立组件开发或库时,最好是不依赖第三方库 为什么不使用provide与inject? 因为它的 ...

  4. vue2.0 $emit $on组件通信

    在vue1.0中父子组件通信使用$dispatch 和 $broadcast,但是在vue2.0中$dispatch 和 $broadcast 已经被弃用. 因为基于组件树结构的事件流方式实在是让人难 ...

  5. Vue2.0组件间数据传递

    Vue1.0组件间传递 使用$on()监听事件: 使用$emit()在它上面触发事件: 使用$dispatch()派发事件,事件沿着父链冒泡: 使用$broadcast()广播事件,事件向下传导给所有 ...

  6. vue2.0s中eventBus实现兄弟组件通信

    在vue1.0中,组件之间的通信主要通过vm.$dispatch沿着父链向上传播和用vm.$broadcast向下广播来实现.然而在vue2.0中,已经废除了这种用法. vuex加入后,对组件之间的通 ...

  7. Vue.js组件之间的通信

    导语:组件之间的关系不外乎两种, 父子组件和非父子组件,本文将对两类组件之间的通信方式进行详细阐述. 父子组件间的通信 通信方式1(单向绑定): Props down, Events up (建议使用 ...

  8. 聊聊Vue.js组件间通信的几种姿势

    写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:https://github.com/a ...

  9. 【vue】饿了么项目-goods商品列表页开发

    1.flex 属性是 flex-grow.flex-shrink 和 flex-basis 属性的简写属性. flex-grow 一个数字,规定项目将相对于其他灵活的项目进行扩展的量. flex-sh ...

随机推荐

  1. 小程序视图层(xx.xml)和逻辑层(xx.js)

    整个系统分为两块视图层(View)和逻辑层(App Service) 框架可以让数据与视图非常简单地保持同步.当做数据修改的时候,只需要在逻辑层修改数据,视图层就会做相应的更新. 通过这个简单的例子来 ...

  2. Collection FrameWork

    Collection FrameWork如下: Collection ├List │├LinkedList │├ArrayList │└Vector │ └Stack └Set Map ├Hashta ...

  3. ExpandableListView控件实现二级列表

    效果图如下: 二级列表附有点击事件. 1.布局文件: 此处加了一个自定义的导航RelativeLayout,记得注activity的时候添加 android:theme="@style/Th ...

  4. ASP.NET中使用UpdatePanel时用Response输出出现错误的解决方法

    asp.net中执行到Response.write("xx");之类语句或Microsoft JScript 运行时错误: Sys.WebForms.PageRequestMana ...

  5. 使用Axure设计中,大型的后台系统原型总结

    使用Axure设计中,大型的后台系统原型总结 2018年4月16日luodonggan 在产品原型设计中,经常会涉及到后台系统原型的设计,如何设计出更规范标准的后台系统原型,是很多产品同行们都会遇到的 ...

  6. [OPENSSL下载][证书] OPENSSL将PFX证书转换为PEM格式

    OpenSSL Convert PFX Convert PFX to PEM openssl pkcs12 -in certificate.pfx -out certificate.cer -node ...

  7. inclusion_tag 界面的嵌套 和渲染

    后端的html渲染到前端: 如果后端直接定义的是html标签,传到前端的时候因为浏览器的安全机制就会直接渲染成字符串如果想要渲染成需要的标签,就需要在后端用make_save()进行包裹,或者直接在前 ...

  8. [翻译] AAPullToRefresh

    AAPullToRefresh 效果: Requirement - 需要的环境 ARC. iOS 6 or higher(tested on iOS 6, 7 and 8). Install - 安装 ...

  9. [翻译] GiFHUD

    GiFHUD progress hud for displaying only animated gif images. no labels (for now) 状态指示器,仅仅用来显示gif图片,不 ...

  10. 定制选择范围的按钮RangeButton

    定制选择范围的按钮RangeButton 效果: 源码: RangeButton.h 与 RangeButton.m // // RangeButton.h // PulsingView // // ...