当前位置:网站首页>Vue communication and cross component listening state Vue communication
Vue communication and cross component listening state Vue communication
2020-11-06 20:48:00 【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]所创,转载请带上原文链接,感谢
边栏推荐
- Kubernetes and OAM to build a unified, standardized application management platform knowledge! (Internet disk link attached)
- How does filecoin's economic model and future value support the price of fil currency breaking through thousands
- Markdown tricks
- ERD-ONLINE 免费在线数据库建模工具
- Small program introduction to proficient (2): understand the four important files of small program development
- What course of artificial intelligence? Will it replace human work?
- Building a new generation cloud native data lake with iceberg on kubernetes
- Even liver three all night, jvm77 high frequency interview questions detailed analysis, this?
- Network programming NiO: Bio and NiO
- Who says cat can't do link tracking? Stand up for me
猜你喜欢
An article takes you to understand CSS gradient knowledge
Introduction to the structure of PDF417 bar code system
【学习】接口测试用例编写和测试关注点
事务的隔离级别与所带来的问题
事件监听问题
What are the common problems of DTU connection
Pn8162 20W PD fast charging chip, PD fast charging charger scheme
Basic usage of Vue codemirror: search function, code folding function, get editor value and verify in time
How to hide part of barcode text in barcode generation software
What is alicloud's experience of sweeping goods for 100 yuan?
随机推荐
ado.net和asp.net的关系
The importance of big data application is reflected in all aspects
只有1个字节的文件实际占用多少磁盘空间
The AI method put forward by China has more and more influence. Tianda et al. Mined the development law of AI from a large number of literatures
Markdown tricks
【ElasticSearch搜索引擎】
CCR coin frying robot: the boss of bitcoin digital currency, what you have to know
消息队列(MessageQueue)-分析
大会倒计时|2020 PostgreSQL亚洲大会-中文分论坛议程安排
C語言I部落格作業03
Behind the record breaking Q2 revenue of Alibaba cloud, the cloud opening mode is reshaping
Basic usage of Vue codemirror: search function, code folding function, get editor value and verify in time
It's time for your financial report to change to a more advanced style -- financial analysis cockpit
How to demote domain controllers and later in Windows Server 2012
游戏主题音乐对游戏的作用
What is alicloud's experience of sweeping goods for 100 yuan?
Some operations kept in mind by the front end foundation GitHub warehouse management
Multi robot market share solution
Application of restful API based on MVC
How to turn data into assets? Attracting data scientists