vue2 broadcast和dispatch的理解
/*
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的理解的更多相关文章
- vue2.0 broadcast和dispatch的理解
阅读目录 vue2 broadcast和dispatch的理解 回到顶部 vue2 broadcast和dispatch的理解 /* broadcast 事件广播 @param {componentN ...
- Vue框架Element的事件传递broadcast和dispatch方法分析
前言 最近在学习饿了么的Vue前端框架Element,发现其源码中大量使用了$broadcast和$dispatch方法,而Element使用的是Vue2.0版本,众所周知在Vue 1.0升级到2.0 ...
- vue之自行实现派发与广播-dispatch与broadcast
要解决的问题 主要针对组件之间的跨级通信 为什么要自己实现dispatch与broadcast? 因为在做独立组件开发或库时,最好是不依赖第三方库 为什么不使用provide与inject? 因为它的 ...
- vue2.0 $emit $on组件通信
在vue1.0中父子组件通信使用$dispatch 和 $broadcast,但是在vue2.0中$dispatch 和 $broadcast 已经被弃用. 因为基于组件树结构的事件流方式实在是让人难 ...
- Vue2.0组件间数据传递
Vue1.0组件间传递 使用$on()监听事件: 使用$emit()在它上面触发事件: 使用$dispatch()派发事件,事件沿着父链冒泡: 使用$broadcast()广播事件,事件向下传导给所有 ...
- vue2.0s中eventBus实现兄弟组件通信
在vue1.0中,组件之间的通信主要通过vm.$dispatch沿着父链向上传播和用vm.$broadcast向下广播来实现.然而在vue2.0中,已经废除了这种用法. vuex加入后,对组件之间的通 ...
- Vue.js组件之间的通信
导语:组件之间的关系不外乎两种, 父子组件和非父子组件,本文将对两类组件之间的通信方式进行详细阐述. 父子组件间的通信 通信方式1(单向绑定): Props down, Events up (建议使用 ...
- 聊聊Vue.js组件间通信的几种姿势
写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:https://github.com/a ...
- 【vue】饿了么项目-goods商品列表页开发
1.flex 属性是 flex-grow.flex-shrink 和 flex-basis 属性的简写属性. flex-grow 一个数字,规定项目将相对于其他灵活的项目进行扩展的量. flex-sh ...
随机推荐
- [NodeJs] 用Nodejs+Express搭建web,nodejs路由和Ajax传数据并返回状态,nodejs+mysql通过ajax获取数据并写入数据库
小编自学Nodejs,看了好多文章发现都不全,而且好多都是一模一样的 当然了,这只是基础的demo,经供参考,但是相信也会有收获 今天的内容是用Nodejs+Express搭建基本的web,然后呢no ...
- HTML学习笔记《一》 ---- HTML基本认识
HTML 基本认识 一.简介 1.HTML是超文本标记语言,标准通用标记语言下的一个应用,解释性语言. 2.“超文本”就是指页面内可以包含图片.链接,甚至音乐.程序等非文字元素. 3.超文本标记语言的 ...
- DOM节点树和元素树--深度遍历
我们在阅读JS高级程序设计的时候,提到了节点树的概念.比如说: elem.parentNode---找elem的父节点: elem.childNodes---找elem的所有的直接子节点: elem. ...
- Memory map of an object array
Student类: package com.itheima; /* * 自动生成构造方法: * 代码区域右键 -- Source -- Generate Constructors from Super ...
- frame shiro 认证示例及原理简述
shiro 认证流程 1.创建一个 javaSE 的maven项目(quickstart),并添加依赖 <dependency> <groupId>junit</grou ...
- statistics_level 参数的应用
转自 http://blog.csdn.net/zengmuansha/article/details/5149398 statistics_level 参数是oracle9.2开始引入的一个控制系统 ...
- 团队项目个人进展——Day05
一.昨天工作总结 冲刺第五天,学习了官方文档说明,学习并但是并未实现地图的放大与缩小 二.遇到的问题 对一些框架和API不太熟悉 未实现地图的放大与缩小 三.今日工作规划 深入学习有关视频与文档说明
- 9.Java注解(Annotation)
一.系统内置标准注解 1.@Override 是一个标记注解类型,它被用作标注方法. 它说明了被标注的方法重载了父类的方法,起到了断言的作用.如果我们使用了这种Annotation在一个没有覆盖父类方 ...
- vuejs code splitting with webpack 3种模式
我们知道一个web app如果太大会严重影响用户的体验,如何能够最快速度地让用户看到完整页面是优化web应用需要做的重要工作. 这其中使用code split实现lazy加载,只让用户初次访问时只加载 ...
- 在 Azure VM 上安装 LEMP Web 服务器
本文逐步讲解如何在 Azure 中的 Ubuntu VM 上部署 NGINX Web 服务器.MySQL 和 PHP(LEMP 堆栈). LEMP 堆栈可以替代常用的 LAMP 堆栈,可安装在 Azu ...