华为快应用-兄弟组件之间的通信

前面几篇博客中博主详细说明了父子组件之间的正反向传值，这篇博客，博主就带大家一起来学习下兄弟组件之间的相互传值。
既然是兄弟组件，那么他们一定有共同的父组件，这是他们传值的关键：
首先在他们共有的父组件中写如下代码：

        onReady () {
            this.establishRef()
        },
                /**
                * 建立相互VM的引用
                */
        establishRef () {
            //cards是兄弟组件1的id，shequs是兄弟组件2的id
            const siblingVm1 = this.$vm('cards')
            const siblingVm2 = this.$vm('shequs')
            //父组件是siblingVm1（cards）的parentVm
            siblingVm1.parentVm = this
            //建立相互引用，siblingVm1（cards）是siblingVm2（shequs）的parentVm
            siblingVm1.nextVm = siblingVm2
            //父组件是siblingVm2（shequs）的parentVm
            siblingVm2.parentVm = this
            //建立相互引用，siblingVm2（cards）是siblingVm1（shequs）的nextVm
            siblingVm2.previousVm = siblingVm1
        }
/*上面的引用关系很重要，在传值时绝对不能写错了，直接决定传值是否能成功*/

在兄弟组件1中：

//兄弟组件1中，按钮来触发传值（兄弟组件1向兄弟组件2传值）
        changeAction:function() {
            //因为兄弟组件1是兄弟组件2的parentVm，所以，兄弟组件2是兄弟组件1的nextVm，如果this.nextVm表示兄弟组件1有nextVm，开始传值
            if (this.nextVm) {
                //传值方法有两种，分别如下
                // Way1. 调用方法
                // this.previousVm.processMessage('兄弟之间通信的消息内容')
                // Way2. 触发事件
                this.nextVm.$emit('customEventInVm2', '兄弟之间通信的消息内容')
            }
        }

在兄弟组件2中接收来自兄弟组件1的传值：

//兄弟组件2中（接收来自兄弟组件1的传值）
        data () {
            return {
                changeStr1: '默认'
            }
        },
        //传递方法1的接收方法
        processMessage (msg) {
            console.log(msg);
            const now = (new Date).toISOString()
            this.changeStr1 = `${now}: ${msg}`
        },
        /**
        * 通过events对象：绑定事件
        */
        //传递方法2的接收方法
        events: {
            customEventInVm2 (evt) {
                const now = (new Date).toISOString()
                this.changeStr1 = `${now}: ${evt.detail}`
            }
        }

如果你希望兄弟组件2向兄弟组件1中传值，一样的方法，只是你需要把nextVm和parentVm进行调换，这一点和其他语言中的传值略有不同，要区分一个先后的。

到此，你学会了么？