vue之自行实现派发与广播-dispatch与broadcast
要解决的问题
主要针对组件之间的跨级通信
为什么要自己实现dispatch与broadcast?
因为在做独立组件开发或库时,最好是不依赖第三方库
为什么不使用provide与inject?
因为它的使用场景,主要是子组件获取上级组件的状态,跨级组件间建立了一种主动提供与依赖注入的关系。
然后有两种场景它不能很好的解决:
父组件向子组件(支持跨级)传递数据;
子组件向父组件(支持跨级)传递数据。
代码如下:
emitter.jsfunction broadcast(componentName, eventName, params) {this.$children.forEach(child => {const name = child.$options.name;if (name === componentName) {child.$emit.apply(child, [eventName].concat(params));} else {// todo 如果 params 是空数组,接收到的会是 undefinedbroadcast.apply(child, [componentName, eventName].concat([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);}}
};这里面的核心思想是通过递归或遍历来查找要broadcast或dispatch的组件名字,然后在组件自身上emit与on
parent.vue<template><div><h1>我是父组件</h1><button @click="handleClick">触发事件</button> <child /></div>
</template>
<script>
import Emitter from "@/mixins/emitter.js";
import Child from "./child";
export default {name: "componentA",mixins: [Emitter],created() {this.$on("child-to-p", this.handleChild);},methods: {handleClick() {this.broadcast("componentB", "on-message", "Hello Vue.js");},handleChild(val) {alert(val);}},components: {Child}
};
</script>
child.vue<template><div>我是子组件</div>
</template>
<script>
import Emitter from "@/mixins/emitter.js";
export default {name: "componentB",mixins: [Emitter],created() {this.$on("on-message", this.showMessage);this.dispatch("componentA", "child-to-p", "hello parent");},methods: {showMessage(text) {window.alert(text);}}
};
</script>
这样就能实现跨级组件自定义通信了,但是,要注意其中一个问题:订阅必须先于发布,也就是说先有on再有emit
父子组件渲染顺序,实例创建顺序
子组件先于父组件前渲染,所以在子组的mounted派发事件时,在父组件中的mounte中是监听不到的。
而父组件的create是先于子组件的,所以可以在父组件中的create可以监听到
转载于:https://www.cnblogs.com/raind/p/10241720.html
vue之自行实现派发与广播-dispatch与broadcast相关推荐
- Vue中的情侣属性$dispatch和$broadcast详解
$dispatch 和 $broadcast 作为一对情侣 ?属性,在 Vue 1.0 中主要用来实现基于组件树结构的事件流通信 -- 通过向上或向下以冒泡的形式传递事件流,以实现嵌套父子组件的通信. ...
- dispatch js实现_通信:派发与广播,on与emit,自行实现dispatch和broadcast方法
上一篇的 provide / inject API 主要解决了跨级组件间的通信问题,不过它的使用场景,主要是子组件获取上级组件的状态,跨级组件间建立了一种主动提供与依赖注入的关系.然后有两种场景它不能 ...
- dispatch emit broadcast
1.broadcast 事件广播 遍历寻找所有子孙组件,假如子孙组件和componentName组件名称相同的话,则触发$emit的事件方法,数据为 params. 如果没有找到 则使用递归的方式 继 ...
- Android广播机制:Broadcast
转载:Android总结篇系列:Android广播机制 1.Android广播机制概述 Android广播分为两个方面:广播发送者和广播接收者,通常情况下,BroadcastReceiver指的就是广 ...
- Vue.js解析(十一)【说说element组件库broadcast与dispatch】
周所周知,Vue在2.0版本中去除了broadcast方法以及broadcast方法以及dispatch方法,最近在学习饿了么的Element时重新实现了这两种方法,并以minix的方式引入. 看一下 ...
- 安卓四大组件之广播组件(Broadcast)
1.广播是什么 之所以叫做广播,就是因为它只负责"说"而不管你"听不听",也就是不管你接收方如何处理. 广播可以一对多,一人发送广播,多人接收处理 Broadc ...
- [笔记]这阶段的有道云笔记前端部分整理
js现在可以运行在 1.浏览器端 2.计算机操作系统上 通过大名鼎鼎的node, node是由c/cpp编写的js运行环境,大概是js通过编译变成c变成汇编变成机器语言...大概 node编译 js ...
- Vue深入-15【Vue组件化设计与派发器思想】
(1).派发器初始,Vue中抽离派发器方法 type => 事件 => 逻辑 => type => 派发器 => 数据的更改 actions const PLUS = ...
- 用vue实现模态框组件
基本上每个项目都需要用到模态框组件,由于在最近的项目中,alert组件和confirm是两套完全不一样的设计,所以我将他们分成了两个组件,本文主要讨论的是confirm组件的实现. 组件结构 < ...
最新文章
- 使用Flex4容器若干技巧
- Windows Azure Storage (19) 再谈Azure Block Blob和Page Blob
- 软件专业人才应具备四种素质
- 使用git克隆GitHub仓库时报错解决方案
- 网站数据是怎么存取在mysql_数据是怎么存储在mysql?
- React 错误Each child in an array or iterator should have a unique “key” prop
- windows启动linux系统,windows 10 启动linux系统
- 抽象工厂模式_设计模式(3) 抽象工厂模式
- command shortcut paste
- Active Directory 灾难恢复
- c++复习篇(三)--函数调用堆栈
- rtx2060为什么叫智商卡_显卡怎么选,GTX1660TI亦是RTX2060?
- CVPR 2021 Oral | Transformer再发力!华南理工和微信提出UP-DETR:无监督预训练检测器...
- 计算机的屏幕多少平方,27寸电脑显示器一般长宽各是多少厘米?
- c# DGV导出excel 使用object类型数组,解决string类型需双击后或分列才可运算的异常
- Layer.js实现表格溢出内容省略号显示,悬停显示全部
- 【智能物流】200亿规模的制造企业,如何规划供应链物流体系?
- 单片机c语言 软件抗干扰,单片机软件抗干扰的几种常见方法
- 我的2016--一半欢喜一半愁,生活总在起变化
- ODBC 编程API
热门文章
- C# 联合查询_c# 之linq——小白入门级
- C++之get、getline探究
- vue 点击div 获取位置_vue接入腾讯位置服务之点击事件
- mysql 前n个最大值_MySQL varchar计算:求列的数目和计算N的最大值
- python列表数据运算_Python基础(2)——数据类型:Numbers、列表、元组、字典、字符串、数据运算...
- python购物车_python购物车功能
- 处理mp3_如何把MP3转换成FLAC格式?这三个方法简单快速
- C++11多线程实现银行存取款案例
- html里面注释浮动框,“浮动”注释与HTML / CSS / JavaScript /任何
- mysql 安装服务 w_MySQL的安装与配置