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的一种模块模式
Sep 08 Javascript
鼠标滑上去后图片放大浮出效果的js代码
May 28 Javascript
js取值中form.all和不加all的区别介绍
Jan 20 Javascript
简单的JavaScript互斥锁分享
Feb 02 Javascript
谷歌浏览器调试JavaScript小技巧
Dec 29 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
Feb 15 Javascript
javascript 中iframe高度自适应(同域)实例详解
May 16 Javascript
Vue.js 中的 $watch使用方法
May 25 Javascript
JS使用正则表达式找出最长连续子串长度
Oct 26 Javascript
webpack file-loader和url-loader的区别
Jan 15 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
JavaScript 中的执行上下文和执行栈实例讲解
Feb 25 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实现分页的一个示例
2006/10/09 PHP
PHP 5.0对象模型深度探索之对象复制
2008/03/27 PHP
zend api扩展的php对象的autoload工具
2011/04/18 PHP
简单谈谈PHP vs Node.js
2015/07/17 PHP
iis 7下安装laravel 5.4环境的方法教程
2017/06/14 PHP
js移除事件 js绑定事件实例应用
2012/11/28 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
2012/12/25 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
购物车选中得到价格实现示例
2014/01/26 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
2015/08/04 Javascript
js实现可控制左右方向的无缝滚动效果
2016/05/29 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
JSONP跨域请求实例详解
2016/07/04 Javascript
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
js中数组的常用方法小结
2016/12/30 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
2018/08/25 Javascript
微信小程序仿今日头条导航栏滚动解析
2019/08/20 Javascript
js模拟F11页面全屏显示
2019/09/17 Javascript
微信小程序保存图片到相册权限设置
2020/04/09 Javascript
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
在centos7中分布式部署pyspider
2017/05/03 Python
python实现随机漫步算法
2018/08/27 Python
python 抓包保存为pcap文件并解析的实例
2019/07/23 Python
wxPython:python首选的GUI库实例分享
2019/10/05 Python
基于PyTorch中view的用法说明
2021/03/03 Python
海外淘书首选:AbeBooks
2017/07/31 全球购物
澳大利亚在线购买葡萄酒:The Wine Collective
2020/02/20 全球购物
递归实现回文判断(如:abcdedbca就是回文,判断一个面试者对递归理解的简单程序)
2013/04/28 面试题
社会实践心得体会
2014/01/03 职场文书
2014年售票员工作总结
2014/11/19 职场文书
人才市场接收函
2015/01/30 职场文书
离婚案件原告代理词
2015/05/23 职场文书
烛光里的微笑观后感
2015/06/17 职场文书
SpringBoot集成MongoDB实现文件上传的步骤
2022/04/18 MongoDB