vue任意关系组件通信与跨组件监听状态vue-communication


Posted in Javascript onOctober 18, 2020

众所周知,组件式开发方式给我们带来了方便,不过也引入了新的问题,组件之间的数据就像被一道无形的墙隔开,如果我们希望临时让两个组件直接通信,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;

视频教程

<iframe src="//player.bilibili.com/player.html?bvid=BV1sD4y1d7mD&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="min-height: 400px"> </iframe>

用法

基本概念:

该组件暴露两个主要 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")

到此这篇关于vue任意关系组件通信与跨组件监听状态vue-communication的文章就介绍到这了,更多相关vue 任意关系组件通信与跨组件监听状态内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript级联下拉列表实例代码(自写)
May 10 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
Dec 24 Javascript
vue2实现可复用的轮播图carousel组件详解
Nov 27 Javascript
JavaScript实现学生在线做题计时器功能
Dec 05 Javascript
详解写好JS条件语句的5条守则
Feb 28 Javascript
微信小程序 调用微信授权窗口相关问题解决
Jul 25 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 Javascript
javascript使用链接跨域下载图片
Nov 01 Javascript
JS图片预加载三种实现方法解析
May 08 Javascript
Vue 组件复用多次自定义参数操作
Jul 27 Javascript
Vue使用Proxy代理后仍无法生效的解决
Nov 13 Javascript
vscode+gulp轻松开发小程序的完整步骤
Oct 18 #Javascript
详解VUE中的插值( Interpolation)语法
Oct 18 #Javascript
vue自定义树状结构图的实现方法
Oct 18 #Javascript
axios封装与传参示例详解
Oct 18 #Javascript
详解如何使用React Hooks请求数据并渲染
Oct 18 #Javascript
js中复选框的取值及赋值示例详解
Oct 18 #Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
Oct 18 #Javascript
You might like
PHP中替换换行符的几种方法小结
2012/10/15 PHP
php进程间通讯实例分析
2016/07/11 PHP
PHP 将dataurl转成图片image方法总结
2016/10/14 PHP
php使用PDO获取结果集的方法
2017/02/16 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
如何实现动态删除javascript函数
2007/05/27 Javascript
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
2012/10/11 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
2012/11/24 Javascript
浅析Node.js查找字符串功能
2014/09/03 Javascript
javascript刷新父页面的各种方法汇总
2014/09/03 Javascript
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
js+css实现select的美化效果
2016/03/24 Javascript
JS本地刷新返回上一页代码
2016/07/25 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
2017/03/10 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
2018/02/09 Javascript
使用异步组件优化Vue应用程序的性能
2019/04/28 Javascript
深入浅出vue图片路径的实现
2019/09/04 Javascript
js实现图片跟随鼠标移动效果
2019/10/16 Javascript
使用next.js开发网址缩短服务的方法
2020/06/17 Javascript
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
[00:20]TI9不朽观赛名额抽取
2019/08/05 DOTA
[43:47]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第一场 12.09
2020/12/11 DOTA
Python实现的数据结构与算法之链表详解
2015/04/22 Python
Python3实现腾讯云OCR识别
2018/11/27 Python
python多线程并发让两个LED同时亮的方法
2019/02/18 Python
使用Filter过滤python中的日志输出的实现方法
2019/07/17 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
python如何查看网页代码
2020/06/07 Python
python如何对链表操作
2020/10/10 Python
Python如何批量生成和调用变量
2020/11/21 Python
好媳妇事迹材料
2014/12/24 职场文书
2016教师政治学习心得体会
2016/01/23 职场文书
Redis高级数据类型Hyperloglog、Bitmap的使用
2021/05/24 Redis