当前位置:网站首页>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]所创,转载请带上原文链接,感谢
边栏推荐
- Flink's datasource Trilogy 2: built in connector
- [Xinge education] poor learning host computer series -- building step 7 Simulation Environment
- 华为Mate 40 系列搭载HMS有什么亮点?
- 给字节的学姐讲如何准备“系统设计面试”
- How about small and medium-sized enterprises choose shared office?
- What is the purchasing supplier system? Solution of purchasing supplier management platform
- CCR coin frying robot: the boss of bitcoin digital currency, what you have to know
- How to hide part of barcode text in barcode generation software
- Take you to learn the new methods in Es5
- Introduction to the structure of PDF417 bar code system
猜你喜欢
游戏主题音乐对游戏的作用
PHP application docking justswap special development kit【 JustSwap.PHP ]
大道至简 html + js 实现最朴实的小游戏俄罗斯方块
ES6 learning notes (4): easy to understand the new grammar of ES6
An article takes you to understand CSS pagination examples
An article will take you to understand CSS3 fillet knowledge
Behind the first lane level navigation in the industry
JVM内存分配 -Xms128m -Xmx512m -XX:PermSize=128m -XX:MaxPermSize=512m
事务的隔离级别与所带来的问题
CCR coin frying robot: the boss of bitcoin digital currency, what you have to know
随机推荐
Try to build my mall from scratch (2): use JWT to protect our information security and perfect swagger configuration
Helping financial technology innovation and development, atfx is at the forefront of the industry
Basic principle and application of iptables
Building a new generation cloud native data lake with iceberg on kubernetes
Gather in Beijing! The countdown to openi 2020
To teach you to easily understand the basic usage of Vue codemirror: mainly to achieve code editing, verification prompt, code formatting
ERD-ONLINE 免费在线数据库建模工具
[Xinge education] poor learning host computer series -- building step 7 Simulation Environment
华为Mate 40 系列搭载HMS有什么亮点?
What are Devops
What are manufacturing and new automation technologies?
Chainlink brings us election results into blockchain everipedia
Read the advantages of Wi Fi 6 over Wi Fi 5 in 3 minutes
What are the criteria for selecting a cluster server?
Multi robot market share solution
Introduction to the structure of PDF417 bar code system
Get twice the result with half the effort: automation without cabinet
嘉宾专访|2020 PostgreSQL亚洲大会阿里云数据库专场:曾文旌
FastThreadLocal 是什么鬼?吊打 ThreadLocal 的存在!!
理解格式化原理