Vue communication and cross component listening state Vue communication

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