当前位置:网站首页>vue任意关系组件通信与跨组件监听状态 vue-communication
vue任意关系组件通信与跨组件监听状态 vue-communication
2020-11-06 20:48:37 【木瓜太香】
大家好!我是木瓜太香!
众所周知,组件式开发方式给我们带来了方便,不过也引入了新的问题,组件之间的数据就像被一道无形的墙隔开,如果我们希望临时让两个组件直接通信,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
边栏推荐
- C++ 数字、string和char*的转换
- C++学习——centos7上部署C++开发环境
- C++学习——一步步学会写Makefile
- C++学习——临时对象的产生与优化
- C++学习——对象的引用的用法
- C++编程经验(6):使用C++风格的类型转换
- Won the CKA + CKS certificate with the highest gold content in kubernetes in 31 days!
- C + + number, string and char * conversion
- C + + Learning -- capacity() and resize() in C + +
- C + + Learning -- about code performance optimization
猜你喜欢
-
C + + programming experience (6): using C + + style type conversion
-
Latest party and government work report ppt - Park ppt
-
在线身份证号码提取生日工具
-
Online ID number extraction birthday tool
-
️野指针?悬空指针?️ 一文带你搞懂!
-
Field pointer? Dangling pointer? This article will help you understand!
-
HCNA Routing&Switching之GVRP
-
GVRP of hcna Routing & Switching
-
Seq2Seq实现闲聊机器人
-
【闲聊机器人】seq2seq模型的原理
随机推荐
- LeetCode 91. 解码方法
- Seq2seq implements chat robot
- [chat robot] principle of seq2seq model
- Leetcode 91. Decoding method
- HCNA Routing&Switching之GVRP
- GVRP of hcna Routing & Switching
- HDU7016 Random Walk 2
- [Code+#1]Yazid 的新生舞会
- CF1548C The Three Little Pigs
- HDU7033 Typing Contest
- HDU7016 Random Walk 2
- [code + 1] Yazid's freshman ball
- CF1548C The Three Little Pigs
- HDU7033 Typing Contest
- Qt Creator 自动补齐变慢的解决
- HALCON 20.11:如何处理标定助手品质问题
- HALCON 20.11:标定助手使用注意事项
- Solution of QT creator's automatic replenishment slowing down
- Halcon 20.11: how to deal with the quality problem of calibration assistant
- Halcon 20.11: precautions for use of calibration assistant
- “十大科学技术问题”揭晓!|青年科学家50²论坛
- "Top ten scientific and technological issues" announced| Young scientists 50 ² forum
- 求反转链表
- Reverse linked list
- js的数据类型
- JS data type
- 记一次文件读写遇到的bug
- Remember the bug encountered in reading and writing a file
- 单例模式
- Singleton mode
- 在这个 N 多编程语言争霸的世界,C++ 究竟还有没有未来?
- In this world of N programming languages, is there a future for C + +?
- es6模板字符
- js Promise
- js 数组方法 回顾
- ES6 template characters
- js Promise
- JS array method review
- 【Golang】️走进 Go 语言️ 第一课 Hello World
- [golang] go into go language lesson 1 Hello World