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

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

前面几篇博客中博主详细说明了父子组件之间的正反向传值,这篇博客,博主就带大家一起来学习下兄弟组件之间的相互传值。


既然是兄弟组件,那么他们一定有共同的父组件,这是他们传值的关键:


首先在他们共有的父组件中写如下代码:

        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进行调换,这一点和其他语言中的传值略有不同,要区分一个先后的。


到此,你学会了么?

目录
相关文章
|
小程序 PHP
微信公众号开发(一)打通服务器与微信之间的通信
说来惭愧PHP做了这么久,好像就没有从头开发过一个微信公众号,这次刚好有机会从头接入开发一个完整的公众号,也不能说完整,但是这些微信的接口我基本上都试一试~看看大概是什么情况。 首先:打通服务器与微信之间的通信。
140 0
|
7月前
|
JSON 小程序 JavaScript
【微信小程序】-- 自定义组件 - 父子组件之间的通信(三十八)
【微信小程序】-- 自定义组件 - 父子组件之间的通信(三十八)
|
7月前
|
JavaScript
Vue 父子组件通信 兄弟组件通信 深层组件通信 方式一览
Vue 父子组件通信 兄弟组件通信 深层组件通信 方式一览
50 0
华为快应用-父子组件的通信(子传父)
华为快应用-父子组件的通信(子传父)
200 0
华为快应用-父子组件的通信(父传子)
华为快应用-父子组件的通信(父传子)
202 0
|
前端开发
好客租房52-通讯的三种方式(兄弟组件的传递)
好客租房52-通讯的三种方式(兄弟组件的传递)
87 0
|
边缘计算 安全 物联网
欧拉和鸿蒙打通后,华为如何界定二者边界?
9 月 25 日,在 Huawei Connect 2021 华为全联接大会(点击查看2021华为全联接大会专题报道)第三日主题演讲中,华为计算产品线总裁邓泰华宣布华为开源操作系统欧拉(openEuler)全新发布。全新升级的欧拉提出全栈原子化解耦,支持版本灵活构建、服务自由组合,通过一套架构灵活支持南向多样性设备、北向全场景应用,可广泛部署于服务器、云计算、边缘计算、嵌入式等各种形态设备。
217 0
欧拉和鸿蒙打通后,华为如何界定二者边界?