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 相关文章推荐
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
Nov 14 Javascript
jQuery中.live()方法的用法深入解析
Dec 30 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
Mar 27 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
Dec 02 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
May 22 Javascript
浅谈通过JS拦截 pushState和replaceState事件
Jul 21 Javascript
webpack4.0打包优化策略整理小结
Mar 30 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
Apr 21 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
Feb 21 Javascript
基于VSCode调试网页JavaScript代码过程详解
Jul 20 Javascript
JS异步宏队列微队列原理详解
Sep 09 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
《破坏领主》销量已超100万 未来将继续开发新内容
2020/03/08 其他游戏
输出控制类
2006/10/09 PHP
一漂亮的PHP图片验证码实例
2014/03/21 PHP
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
php采用file_get_contents代替使用curl实例
2014/11/07 PHP
PHP遍历XML文档所有节点的方法
2015/03/12 PHP
php自定义错误处理用法实例
2015/03/20 PHP
PHP基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
ArrayList类(增强版)
2007/04/04 Javascript
jquery form表单提交插件asp.net后台中文解码
2010/06/12 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
jquery 判断滚动条到达了底部和顶端的方法
2014/04/02 Javascript
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
JavaScript限定图片显示大小的方法
2015/03/11 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
2015/07/31 Javascript
AngularJS 依赖注入详解及示例代码
2016/08/17 Javascript
通过bootstrap全面学习less
2016/11/09 Javascript
nodejs中模块定义实例详解
2017/03/18 NodeJs
jQuery实现定时隐藏对话框的方法分析
2018/02/12 jQuery
react 应用多入口配置及实践总结
2018/10/17 Javascript
cocos2dx+lua实现橡皮擦功能
2018/12/20 Javascript
es6函数name属性功能与用法实例分析
2020/04/18 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
2020/08/03 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
2020/11/13 Javascript
[56:13]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第一场 1月10日
2021/03/11 DOTA
numpy排序与集合运算用法示例
2017/12/15 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
小区门卫管理制度
2014/01/29 职场文书
涨价通知怎么写
2015/04/23 职场文书
2019年汽车租赁合同范本!
2019/08/12 职场文书
某某店铺的开业庆典主持词范本
2019/11/25 职场文书
Pytest实现setup和teardown的详细使用详解
2021/04/17 Python
Java面试题冲刺第十六天--消息队列
2021/08/07 面试题
java中为什么说子类的构造方法默认访问的是父类的无参构造方法
2022/04/13 Java/Android
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python