前面几篇博客中博主详细说明了父子组件之间的正反向传值,这篇博客,博主就带大家一起来学习下兄弟组件之间的相互传值。
既然是兄弟组件,那么他们一定有共同的父组件,这是他们传值的关键:
首先在他们共有的父组件中写如下代码:
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进行调换,这一点和其他语言中的传值略有不同,要区分一个先后的。
到此,你学会了么?