快应用的事件监听机制和组件间通信(6)

另外一个兄弟组件可以通过父组件中建立相互引用达到相互持有ViewModel的目的，通过在生命周期onReady()中执行establishRef()实现，如下代码所示：

<template>  
  
<div class="tutorial-page">  
  
<!-- 兄弟VM通信 -->  
  
<comp-part2 id="sibling1"></comp-part2>  
  
<comp-part3 id="sibling2"></comp-part3>  
  
</div>  
  
</template>  
  
<style lang="less">  
  
</style>  
  
<script>  
  
// 父组件  
  
export default {  
  
onReady () {  
  
this.establishRef()  
  
},  
  
/**  
  
* 建立相互VM的引用，父组件将两个兄弟组件联系了起来  
  
*/  
  
establishRef () {  
  
const siblingVm1 = this.$vm('sibling1')  
  
const siblingVm2 = this.$vm('sibling2')  
  
siblingVm1.parentVm = this  
  
siblingVm1.nextVm = siblingVm2  
  
siblingVm2.parentVm = this  
  
siblingVm2.previousVm = siblingVm1  
  
}  
  
}  
  
</script>  

那么另外一个子组件的Pub端定义就很简单了，执行sendMesssage()即可完成触发，如下代码所示：

<template>  
  
<div class="tutorial-page">  
  
<text class="tutorial-title">自定义组件3:</text>  
  
<text onclick="sendMesssage">点击发送消息</text>  
  
</div>  
  
</template>  
  
<style lang="less">  
  
</style>  
  
<script>  
  
// 子组件: part3  
  
export default {  
  
sendMesssage () {  
  
if (this.previousVm) {  
  
// Way1. 调用方法  
  
this.previousVm.processMessage('兄弟之间通信的消息内容')  
  
// Way2. 触发事件  
  
this.previousVm.$emit('customEventInVm2', '兄弟之间通信的消息内容')  
  
}  
  
}  
  
}  
  
</script>  

解释一下

通过上面的例子，我们可以看到，comp-part2和 comp-part3在父组件中通过nextVm和previousVm建立了‘兄弟关系’，基于此,它们之间可以直接调用对方的方法（如processMessage），或会通过$emit方法触发对方监听的事件'customEventInVm2'。

结尾

（编辑：ASP站长网）