当前位置:网站首页>vue任意关系组件通信与跨组件监听状态 vue-communication
vue任意关系组件通信与跨组件监听状态 vue-communication
2020-11-06 20:48:00 【木瓜太香】
大家好!我是木瓜太香!
众所周知,组件式开发方式给我们带来了方便,不过也引入了新的问题,组件之间的数据就像被一道无形的墙隔开,如果我们希望临时让两个组件直接通信,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")
我自己建了一个web前端的交流裙有兴趣的可以加入进来交流哦:245650187(免费)237871108(收费)。 个人微信: GD6570 个人球球:718879459 当然你也可以哔哩哔哩搜索木瓜太香
版权声明
本文为[木瓜太香]所创,转载请带上原文链接,感谢
https://my.oschina.net/u/4642048/blog/4678611
边栏推荐
- In depth understanding of the construction of Intelligent Recommendation System
- 使用 Iceberg on Kubernetes 打造新一代云原生数据湖
- Common algorithm interview has been out! Machine learning algorithm interview - KDnuggets
- 合约交易系统开发|智能合约交易平台搭建
- Python + appium automatic operation wechat is enough
- 做外包真的很难,身为外包的我也无奈叹息。
- 嘗試從零開始構建我的商城 (二) :使用JWT保護我們的資訊保安,完善Swagger配置
- 一篇文章带你了解SVG 渐变知识
- How long does it take you to work out an object-oriented programming interview question from Ali school?
- 速看!互联网、电商离线大数据分析最佳实践!(附网盘链接)
猜你喜欢
速看!互联网、电商离线大数据分析最佳实践!(附网盘链接)
What is the side effect free method? How to name it? - Mario
Filecoin的经济模型与未来价值是如何支撑FIL币价格破千的
How long does it take you to work out an object-oriented programming interview question from Ali school?
至联云解析:IPFS/Filecoin挖矿为什么这么难?
数字城市响应相关国家政策大力发展数字孪生平台的建设
全球疫情加速互联网企业转型,区块链会是解药吗?
Existence judgment in structured data
使用 Iceberg on Kubernetes 打造新一代云原生数据湖
Summary of common algorithms of binary tree
随机推荐
Summary of common algorithms of binary tree
10 easy to use automated testing tools
Installing the consult cluster
axios学习笔记(二):轻松弄懂XHR的使用及如何封装简易axios
Wiremock: a powerful tool for API testing
Group count - word length
What is the difference between data scientists and machine learning engineers? - kdnuggets
在大规模 Kubernetes 集群上实现高 SLO 的方法
Skywalking series blog 5-apm-customize-enhance-plugin
你的财务报告该换个高级的套路了——财务分析驾驶舱
从海外进军中国,Rancher要执容器云市场牛耳 | 爱分析调研
快快使用ModelArts,零基礎小白也能玩轉AI!
The choice of enterprise database is usually decided by the system architect - the newstack
git rebase的時候捅婁子了,怎麼辦?線上等……
I've been rejected by the product manager. Why don't you know
Using consult to realize service discovery: instance ID customization
6.5 request to view name translator (in-depth analysis of SSM and project practice)
5.4 static resource mapping
深度揭祕垃圾回收底層,這次讓你徹底弄懂她
6.4 viewresolver view parser (in-depth analysis of SSM and project practice)