当前位置:网站首页>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]所创,转载请带上原文链接,感谢
边栏推荐
- 理解格式化原理
- Contract trading system development | construction of smart contract trading platform
- Installing ns-3 on ubuntu18.04
- 大会倒计时|2020 PostgreSQL亚洲大会-中文分论坛议程安排
- How to demote domain controllers and later in Windows Server 2012
- Elasticsearch Part 6: aggregate statistical query
- image operating system windows cannot be used on this platform
- 如何对数据库账号权限进行精细化管理?
- Basic usage of Vue codemirror: search function, code folding function, get editor value and verify in time
- Description of phpshe SMS plug-in
猜你喜欢
FastThreadLocal 是什么鬼?吊打 ThreadLocal 的存在!!
Even liver three all night, jvm77 high frequency interview questions detailed analysis, this?
每个大火的“线上狼人杀”平台,都离不开这个新功能
GitHub: the foundation of the front end
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
Behind the first lane level navigation in the industry
嘉宾专访|2020 PostgreSQL亚洲大会阿里云数据库专场:曾文旌
Markdown tricks
Read the advantages of Wi Fi 6 over Wi Fi 5 in 3 minutes
Network security engineer Demo: the original * * is to get your computer administrator rights! [maintain]
随机推荐
【自学unity2d传奇游戏开发】如何让角色动起来
Isn't data product just a report? absolutely wrong! There are university questions in this category
Axios learning notes (2): easy to understand the use of XHR and how to package simple Axios
意外的元素..所需元素..
How to get started with new HTML5 (2)
What are the criteria for selecting a cluster server?
It's time for your financial report to change to a more advanced style -- financial analysis cockpit
C#和C/C++混合编程系列5-内存管理之GC协同
Interpretation of Cocos creator source code: engine start and main loop
ado.net和asp.net的关系
面试官: ShardingSphere 学一下吧
Share with Lianyun: is IPFs / filecoin worth investing in?
2020年数据库技术大会助力技术提升
DRF JWT authentication module and self customization
Top 5 Chinese cloud manufacturers in 2018: Alibaba cloud, Tencent cloud, AWS, telecom, Unicom
C + + and C + + programmers are about to be eliminated from the market
Staying up late summarizes the key points of report automation, data visualization and mining, which is different from what you think
Shh! Is this really good for asynchronous events?
GitHub: the foundation of the front end
(1) ASP.NET Introduction to core3.1 Ocelot