vue任意关系组件通信与跨组件监听状态 vue-communication
大家好!我是木瓜太香!
众所周知,组件式开发方式给我们带来了方便,不过也引入了新的问题,组件之间的数据就像被一道无形的墙隔开,如果我们希望临时让两个组件直接通信,vuex 太巨,而 $emit 又不好维护 provider 不可控 这个时候就该今天的主角 vue-communication 登场了!
vue-communication介绍
- 他是一个可观测可调试的vue组件通信方案
- 任意关系组件可直接通信
- 支持跨组件监听数据变化
- 支持发送离线数据
安装
yarn add vue-communication
// 或者 npm install vue-communication -D
引入
import { $sender, $receiver } "vue-communication";
Vue.prototype.$sender = $sender;
Vue.prototype.$receiver = $receiver;
视频教程
用法
基本概念:
该组件暴露两个主要 API 一个是发送者 $sender
一个是接受者 $receiver
,所有的通信都通过这两个方法来实现,这里希望大家将 $sender
理解成发送意图的发送者,他发送的是意图,意图就是希望做一件什么事情。
意图类型: dataOnce
modifyOnce
data
modify
watch
目前只有以上5种意图分别涵盖了:发送数据的一次和多次,修改数据的一次和多次,跨组件监听数据变化
发送数据:
假如 A 组件只向 B 组件发送一次
数据:
A 组件中直接使用 this.$sender("dataOnce-A-B",{d: "我是数据"})
B 组件中在任意时刻(哪怕B都还没挂载都行,放心食用)使用this.$receiver("dataOnce-A-B")
这个函数返回一个 Promise 对象,直接 .then 接收即可
发送多次就用 this.$sender("data-A-B","我是数据")
,该方法调用多次,对应组件就会多次接收该数据
接收会有变化,由于会多次接收所以无法使用 Promise 来实现,请在参数追加回调this.$receiver("data-A-B",function(data){ // data就是数据 })
注意:
这里面的 意图修饰符-组件1-组件2
的格式是强制的,不管你的组件名有多长,你都要完整的给出!下面的修改数据也一样,对应到 data-A-B 这个案例,其整个字符串可以称为一个“意图”,data 叫做意图修饰符。
接收回执:
我相信大家都明白一个道理,如果委托 A 给 B 送东西,在 A 送到之后不应该默不吭声的就完了,而是应该告诉你一声,嘿!你让我送的东西我已经送到了哦!这就是回执。
需要注意的是回执目前只有在一次性操作中才会有,例如 dataOnce
modifyOnce
他们通过 $sender
返回的 Promise 对象给出,让发送者可以知道,我发送的数据什么时候被接收了
this.$sender("dataOnce-A-B","木瓜太香")
.then(flag => {
console.log("接受者已经接受到数据了!")
})
修改数据:
A 组件中使用 this.$sender("modifyOnce-A-B","name","木瓜太香")
表示 A 组件要修改 B 组件中的 name 属性把他变为 木瓜太香
B组件中使用 this.$receiver("modifyOnce-A-B","name")
即可完成修改,注意第二个参数必须传,这是一个许可,表示你认可 A 组件修改当前组件的 name 属性,如果你写错了或者没传那么许可不成立,这是一个让数据变动可预测也强迫开发者需要更清楚自己在做什么的一个实现。
如果你要改 obj 对象下的 name 那么可以写成 this.$sender("modifyOnce-A-B","obj.name","木瓜太香")
如果你要修改多次可以参照 data 意图的示例,使用 modify 意图修饰符即可,注意,目前修改是没有回调的,如果你想知道数据什么时候被修改,可以自己在组件内部监听。
跨组件监听数据:
假如 A 组件要监听 B 组件中的 name 数据变动:
A 组件使用 this.$sender("watch-A-B","person.name",function(nv,ov){ // nv 表示新值 ov 表示旧值 })
B 组件只需要给出一次许可即可: this.$receiver("watch-A-B","person.name")
有前端问题需要讨论的可以加我的qun:237871108。也可以通过哔哩哔哩搜索木瓜太香找到我。
vue任意关系组件通信与跨组件监听状态 vue-communication的更多相关文章
- react第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参)
第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参) #课程目标 1.梳理react组件之间的关系 2.掌握父子传值的方法 3.掌握子父传值的方法 ...
- highcharts图表组件入门教程:如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度
highcharts图表组件入门教程:如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度 作者:highcharts | 时间:2014-6-11 14:07:05 | [小 大] | ...
- localstrage、cookie、session等跨域和跨页面监听更新问题
localstrage.cookie.session等跨域和跨页面监听更新问题
- vue组件通信&&v兄弟组件通信eventbus遇到的问题(多次触发、第一次不触发)
组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的 (vuex以后再说). 父组件--> 子组件 1. 属性设置 父组件关键代码如下: <templ ...
- vue组件之间的通信, 父子组件通信,兄弟组件通信
组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的. 父组件--> 子组件 1. 属性设置 父组件关键代码如下: <template> < ...
- vue组件通信之父子组件通信
准备工作: 首先,新建一个项目,如果这里有不会的同学,可以参考我转载过的文章 http://www.cnblogs.com/Sky-Ice/p/8875958.html vue 脚手架安装及新建项目 ...
- vue组件通信之父组件主动获取子组件数据和方法
ref 可以用来获取到dom节点,如果在组件中应用,也可以用来获取子组件的数据和方法. 比如,我定义了一个home组件,一个head组件,home组件中引用head组件. 此时,home组件是head ...
- 20、解决Vue使用bus兄弟组件间传值,第一次监听不到数据
1.新建bus.js文件: import Vue from 'vue' export default new Vue; 2.在需要通信组件A,B中引入bus: A组件: import Bus from ...
- vue2.0父子组件通信以及同级组件通信
1.父向子通信 父组件为singer.vue.子组件为list-view.vue.需要把歌手的数据传给子组件.则绑定 :data = 'singers' ,singers为父组件的值.data为子组件 ...
随机推荐
- Oracle数据库之表与表数据操作
一.SQL语言 SQL语言分为四种,分别是:数据定义语言(DDL).数据操纵语言(DCL).事务控制语言(TCL).数据控制语言(DML). 1.1 数据定义语言(DDL) 建立.修改.删除数据库对象 ...
- SpringBoot2.0 配置多数据源
一.简述 配置多数据源意思就是在一个项目中使用多个数据库,在项目使用中可以不用手动切换数据库来实现不同数据库的数据获取和更新. 源码地址: https://github.com/hanguilin/b ...
- [CF664A]Complicated GCD(数论)
题目链接 http://codeforces.com/problemset/problem/664/A 题意 给两个数,找出它们的最大公因子d,使得从a到b之间的数都可以整除d. 题解 结论: 当gc ...
- 当try、catch中有return时,finally中的代码会执行么?
今天,看到一个面试题: try-catch-finally 中,如果 catch 中 return 了,finally 还会执行吗? 我们用代码来验证下: public static void mai ...
- 分布式系统监视zabbix讲解五之web监控
Web 监控 概况 你可以使用 Zabbix 检查几个网站可用性方面. 如果要使用 Web 检测功能,必须在 编译Zabbix 的时候加入 cURL(libcurl) 的支持. 要使用 Web 监控, ...
- 秋招进大厂其实也就那么回事,你会这样卡进大厂的BUG吗?
在BAT这种大厂里,只要肯吃苦,技术和工资进步的速度会超出你想象,我在上海,按当前价格算,一般在大厂里干个三四年,好歹房子的首付应该能有,而且这种房子还不是太偏远太小的. 进大厂确实需要一定的实力,但 ...
- DevOps Next-AI / ML虚拟会议
这个中秋国庆,一起进阶反超呀!10月1日星期四,加入DevOps Next,可以参加有关AI和ML的免费活动,内容涉及持续测试,代码质量和DevOps生产力.优秀的你一起来加入! 关于本次活动 Dev ...
- mysql-2-where
#进阶2:条件查询 /* 语法: SELECT 查询列表 FROM 表名 WHERE 筛选条件 分类: 1.按条件表达式筛选:> < = != <> >= <= 2 ...
- Centos6.6x系统与unbutu18.04系统升级ssh到8.3版本
Centos6.6升级ssh5.3版本到ssh8.3版本 下载所需要的源码包: ]#wget https://files-cdn.cnblogs.com/files/luckjinyan/zlib-1 ...
- Java知识系统回顾整理01基础01第一个程序03Eclipse下载安装
Eclipse是最流行的java 集成开发环境IDE(Integrated Development Environment) 下载安装Eclipse两种方式 一.方式1:Eclipse官网下载安装 链 ...