快应用的变乱监听机制和组件间通讯

其它一个兄弟组件可以通过父组件中成立彼此引用到达彼此持有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>  

表明一下

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!