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 相关文章推荐
用jscript启动sqlserver
Jun 21 Javascript
HTML中事件触发列表与解说
Jul 09 Javascript
利用JQuery的load函数动态加载其它页面的内容的实现代码
Dec 14 Javascript
html5 canvas js(数字时钟)实例代码
Dec 23 Javascript
Js+Jq获取URL参数的集中方法示例代码
May 20 Javascript
js创建表单元素并使用submit进行提交
Aug 14 Javascript
AngularJS学习笔记之ng-options指令
Jun 16 Javascript
AngularJS表格添加序号的方法
Mar 03 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
Mar 01 Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 Javascript
vue单文件组件无法获取$refs的问题
Jun 24 Javascript
小程序实现可拖动的悬浮按钮
Sep 07 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
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
PHP中md5()函数的用法讲解
2019/03/30 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
xml 封装与解析(javascript和C#中)
2009/07/26 Javascript
一个简单的js鼠标划过切换效果
2010/06/30 Javascript
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
在javascript中实现函数数组的方法
2013/12/25 Javascript
基于Vuejs实现购物车功能
2016/08/02 Javascript
canvas绘制表盘时钟
2017/01/23 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
2017/04/12 Javascript
详解webpack es6 to es5支持配置
2017/05/04 Javascript
vue toggle做一个点击切换class(实例讲解)
2018/03/13 Javascript
浅谈vuex actions和mutation的异曲同工
2018/12/13 Javascript
JS中的防抖与节流及作用详解
2019/04/01 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
2019/04/17 Javascript
Vue中 axios delete请求参数操作
2020/08/25 Javascript
python+pyqt实现右下角弹出框
2017/10/26 Python
Python求出0~100以内的所有素数
2018/01/23 Python
python2.7无法使用pip的解决方法(安装easy_install)
2018/04/03 Python
Python结合ImageMagick实现多张图片合并为一个pdf文件的方法
2018/04/24 Python
Python 查找字符在字符串中的位置实例
2018/05/02 Python
基于PyQt4和PySide实现输入对话框效果
2019/02/27 Python
django和vue实现数据交互的方法
2019/08/21 Python
利用CSS3实现毛玻璃效果示例源码
2016/09/25 HTML / CSS
《最可爱的人》教学反思
2014/02/14 职场文书
会计专业导师推荐信
2014/03/08 职场文书
应聘编辑自荐信范文
2014/03/12 职场文书
关于安全演讲稿
2014/05/09 职场文书
党员演讲稿
2014/09/04 职场文书
工作证明英文模板
2014/10/21 职场文书
2015年银行工作总结范文
2015/04/01 职场文书
少年雷锋观后感
2015/06/10 职场文书
导游词之青城山景区
2019/09/27 职场文书
python中 Flask Web 表单的使用方法
2022/05/20 Python
MySql中的json_extract函数处理json字段详情
2022/06/05 MySQL
MySQL一劳永逸永久支持输入中文的方法实例
2022/08/05 MySQL