当前位置:网站首页>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

Video address

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]所创,转载请带上原文链接,感谢