vue Arbitrary Relation Component Communication and Cross Component Listening Status vue communication

As we all know, component-based development has brought us convenience, but it has also introduced new problems. The data between components is like being separated by an invisible wall. If we want to temporarily let two components communicate directly, vuex is too huge, and $emit is not easy to maintain. provider is uncontrollable. At this time, it is time for today's protagonist vue-communication to appear!

Introduction of vue-communication

It is an observable and debuggable vue component communication solution Any relational component can communicate directly Support cross-component monitoring of data changes Support sending offline data

Installation

yarn add vue-communication
//  Or  npm install vue-communication -D

Introduce

import { $sender, $receiver } "vue-communication";
Vue.prototype.$sender = $sender;
Vue.prototype.$receiver = $receiver;

Video tutorials

<iframe src="//player.bilibili.com/player.html?bvid=BV1sD4y1d7mD&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="min-height: 400px"> </iframe>

Usage

Basic concepts:

This component exposes two main API, one is the sender $sender and the other is the receiver $receiver. All communication is realized by these two methods. Here, I hope everyone will understand $sender as the sender who sends the intention. He sends the intention, and the intention is to do something.

Intention type: dataOnce modifyOnce data modify watch

At present, only the above five intentions are covered respectively: sending data once and more, modifying data once and more, and monitoring data changes across components

Send data:

If the A component only sends data to the B component once:

Use this directly in the A component. $sender ("dataOnce-A-B", {d: "I am data"})

B component at any time (even if B has not been mounted, feel free to eat) use this. $receiver ("dataOnce-A-B") this function to return an Promise object, directly. then can be received

this. $sender ("data-A-B", "I am the data") is used when the method is sent multiple times, and the corresponding component will receive the data multiple times

The reception will change and cannot be implemented with Promise because it will be received multiple times. Please append a callback to this. $receiver to the parameter ("data-A-B", function (data) {//data is data})

Note:

The formatting of the intent modifiers-Component 1-Component 2 is mandatory, no matter how long your component name is, you have to give it in its entirety! The following modification data is also one, corresponding to the case of data-A-B, whose whole string can be called an "intention", and data is called an intention modifier.

Receipt receipt:

I believe everyone understands a truth. If you entrust A to send something to B, you should not be silent after A is delivered, but should tell you 1, hey! I have already delivered what you asked me to deliver! This is the receipt.

It should be noted that the receipt will only be available in one sexual operation at present, such as dataOnce modifyOnce

They are given through the Promise object returned by $sender, so that the sender can know when the data I sent was received

this.$sender("dataOnce-A-B"," Papaya is too fragrant ")
.then(flag => {
  console.log(" The recipient has received the data! ")
})

Modify data:

this is used in the A component. $sender ("modifyOnce-A-B", "name", "Papaya too fragrant") means that the A component modifies the name attribute in the B component to change it to papaya too fragrant

The modification can be completed by using this. $receiver ("modifyOnce-A-B", "name") in B component. Note that the second parameter must be passed, which is a license, indicating that you approve A component to modify the name attribute of the current component. If you write it wrong or don't pass it, the license won't hold. This is an implementation that makes data changes predictable and forces developers to know more about what they are doing.

If you want to change name under obj object, you can write it as this. $sender ("modifyOnce-A-B", "obj. name", "Papaya is too fragrant")

If you want to modify many times, you can refer to the example of data intention, and use modify intention modifier. Note that there is no callback for modification at present. If you want to know when the data is modified, you can listen inside the component yourself.

Listening for data across components:

If the A component is listening for name data changes in the B component:

The A component uses this. $sender ("watch-A-B", "person. name", function (nv, ov) {//nv for new value ov for old value})

Only one license is required for the B component: this. $receiver ("watch-A-B", "person. name")