Huawei fast application - communication between brother components

In the previous several blogs, the blogger explained in detail the positive and negative values between the parent-child components. In this blog, the blogger will take you to learn the mutual values between the brother components.
Since they are brother components, they must have a common parent component, which is the key to their value transfer:
First, write the following code in their common parent component:

        onReady () {
            this.establishRef()
        },
                /**
                * Establish a reference to each other's VM S
                */
        establishRef () {
            //cards is the id of brother component 1, and shequs is the id of brother component 2
            const siblingVm1 = this.$vm('cards')
            const siblingVm2 = this.$vm('shequs')
            //The parent component is parentVm of siblingVm1 (cards)
            siblingVm1.parentVm = this
            //Establish mutual reference, siblingVm1 (cards) is the parent VM of siblingVm2 (shequs)
            siblingVm1.nextVm = siblingVm2
            //The parent component is the parentVm of siblingVm2 (shequs)
            siblingVm2.parentVm = this
            //To establish a cross reference, siblingVm2 (cards) is the nextVm of siblingVm1 (shequs)
            siblingVm2.previousVm = siblingVm1
        }
/*The above reference relationship is very important. You can't write wrong when passing values. It directly determines whether the values can be passed successfully*/

In brother assembly 1:

//In brother component 1, press the button to trigger the value transfer (brother component 1 transfers value to brother component 2)
        changeAction:function() {
            //Since brother component 1 is parentVm of brother component 2, brother component 2 is nextVm of brother component 1. If this.nextVm indicates that brother component 1 has nextVm, start to transfer values
            if (this.nextVm) {
                //There are two ways to transfer values, as follows
                // Way1. Call method
                // this.previousVm.processMessage('message content of communication between brothers')
                // Way2. Trigger event
                this.nextVm.$emit('customEventInVm2', 'Message content of communication between brothers')
            }
        }

Receive values from brother 1 in brother 2:

//Brother component 2 (receive values from brother component 1)
        data () {
            return {
                changeStr1: 'default'
            }
        },
        //Receiving method of transfer method 1
        processMessage (msg) {
            console.log(msg);
            const now = (new Date).toISOString()
            this.changeStr1 = `${now}: ${msg}`
        },
        /**
        * Through the events object: binding events
        */
        //Receiving method of transfer method 2
        events: {
            customEventInVm2 (evt) {
                const now = (new Date).toISOString()
                this.changeStr1 = `${now}: ${evt.detail}`
            }
        }

If you want brother component 2 to pass values to brother component 1, the same way, but you need to exchange nextVm and parentVm, which is slightly different from the values passed in other languages, and you need to distinguish one priority.

Here, have you learned?

Posted on Fri, 31 Jan 2020 20:40:30 -0800 by mrjam