当前位置:网站首页>Vue communication and cross component listening state Vue communication
Vue communication and cross component listening state Vue communication
2020-11-06 20:48:37 【Papaya is too fragrant】
Hello everyone ! I am papaya, too fragrant !
as everyone knows , Component based development has brought us convenience , But it also introduces new problems , Data between components is like being separated by an invisible wall , If we want to temporarily have two components communicate directly ,vuex Too big , and $emit It's not easy to maintain provider Out of control This is the time for today's protagonist vue-communication Debut !
vue-communication Introduce
- It's an observable, debugged vue Component communication scheme
- Any relational component can communicate directly
- Support cross component monitoring of data changes
- Support sending offline data
install
yarn add vue-communication
// perhaps npm install vue-communication -D
introduce
import { $sender, $receiver } "vue-communication";
Vue.prototype.$sender = $sender;
Vue.prototype.$receiver = $receiver;
Video tutorial
usage
Basic concepts :
The component exposes two main API One is the sender $sender
One is the recipient $receiver
, All communication is achieved through these two methods , I hope you will $sender
The sender understood as the sending intention , He's sending an intention , Intention is what you want to do .
The type of intention : dataOnce
modifyOnce
data
modify
watch
At present, only the above 5 Each intention covers : Send data once and many times , Modify the data one and more times , Monitoring data changes across components
send data :
If A Components are directed only to B Component send once
data :
A Directly used in components this.$sender("dataOnce-A-B",{d: " I'm data "})
B Component at any time ( Even if the B It's ok if you haven't mounted it yet , Eat with ease ) Use this.$receiver("dataOnce-A-B")
This function returns one Promise object , direct .then Just receive
Send more than once this.$sender("data-A-B"," I'm data ")
, This method is called multiple times , The corresponding component will receive the data multiple times
Reception will change , It can't be used because it will be received many times Promise To achieve , Please append callback to parameter this.$receiver("data-A-B",function(data){ // data It's data })
Be careful :
Inside Intention modifier - Components 1- Components 2
Is mandatory , No matter how long your component name is , You have to give the complete ! The same is true for the modified data below , Corresponding to data-A-B This case , The whole string can be called a “ Intention ”,data It's called the intent modifier .
Receiving receipt :
I believe we all understand a truth , If you entrust A to B Delivery , stay A It should not be silent after delivery , It's about telling you , well ! I have already delivered what you asked me to send ! This is the receipt .
It should be noted that receipts are currently available only in one-time operations , for example dataOnce
modifyOnce
They passed $sender
Back to Promise The object gives , Let the sender know , When was the data I sent received
this.$sender("dataOnce-A-B"," Papaya is too fragrant ")
.then(flag => {
console.log(" The recipient has received the data !")
})
Modifying data :
A Used in components this.$sender("modifyOnce-A-B","name"," Papaya is too fragrant ")
Express A The component needs to be modified B In the component name Attributes change him to Papaya is too fragrant
B Used in components this.$receiver("modifyOnce-A-B","name")
You can complete the modification , Note that the second parameter must be passed , This is a license , It means that you approve of A Component modifies the current component's name attribute , If you make a mistake or don't transmit it, then the permission doesn't hold , It's an implementation that makes data changes predictable and forces developers to be more aware of what they're doing .
If you want to change obj Under the object name Then it can be written as this.$sender("modifyOnce-A-B","obj.name"," Papaya is too fragrant ")
If you want to modify it many times, you can refer to data An example of intention , Use modify The intention modifier is enough , Be careful , At present, there is no callback in the modification , If you want to know when the data was modified , You can listen inside the component itself .
Listen to data across components :
If A Component to listen to B In the component name Data changes :
A Components use this.$sender("watch-A-B","person.name",function(nv,ov){ // nv Represents the new value ov Old value })
B Components only need to be licensed once : this.$receiver("watch-A-B","person.name")
I built one myself web Front of the exchange skirt, interested can join in the exchange oh :245650187( free )237871108( charge ). Personal wechat : GD6570 Individual ball :718879459 Of course, you can also search Bili Bili papaya is too fragrant
版权声明
本文为[Papaya is too fragrant]所创,转载请带上原文链接,感谢
边栏推荐
- 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