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

1 在父组件的comp-part1标签中，我们看到这样一个属性，onevt-type3 = "evtTypeHandler"，这是指，在该节点上绑定了名为evtType3的方法，如果子组件中evtType3Emit调用执行，则会执行父组件中的evtTypeHandler的函数， 从而完成子组件与父组件的通信。

2 父组件中的evtType1Emit方法，该方法通过调用$broadcast方法，触发了名为'evtType1'的事件，并传递了params参数，'evtType1'事件则注册在子组件的onInit方法中，从而完成父组件与子组件的通信。

所以，框架向开发者提供了双向的事件传递。

向下传递：父组件触发，子组件响应；调用parentVm.$broadcast()完成向下传递，如：evtType1

向上传递：子组件触发，父组件响应；调用childVm.$dispath()完成向上传递，如：evtType2

兄弟组件之间的通信

传统的兄弟等非父子组件之间通信，是通过观察者模型来完成。观察者模式的作用是当一个对象的状态发生变化时，能够自动通知其他关联对象，自动刷新对象状态。

开发者可以自己写一个Pub/Sub模型实现通信解耦；不过本文并不详细介绍如何通过观察者模式来实现组件间通信，这个题目够另写一篇文章了。

其实，在业务逻辑相对简单的情况下，我们可以使用ViewModel本身的事件绑定来处理。兄弟组件的相同点是，他们拥有相同的父组件，所以，父组件将是兄弟组件通信的桥梁，可以在以下代码中看到这个过程。

示例如下：

子组件定义了Sub端的逻辑处理，有processMessage()、customEventInVm2()，后者同使用$on效果一致

<template>  
  
<div class="tutorial-page">  
  
<text class="tutorial-title">自定义组件2:</text>  
  
<text>处理消息：{{msg}}</text>  
  
<text>事件内容：{{eventDetail}}</text>  
  
</div>  
  
</template>  
  
<style lang="less">  
  
</style>  
  
<script>  
  
// 子组件: part2  
  
export default {  
  
props: [  
  
],  
  
data () {  
  
return {  
  
msg: null,  
  
eventDetail: null  
  
}  
  
},  
  
processMessage (msg) {  
  
const now = (new Date).toISOString()  
  
this.msg = `${now}: ${msg}`  
  
},  
  
/**  
  
* 通过events对象：绑定事件，和on效果一致  
  
*/  
  
events: {  
  
customEventInVm2 (evt) {  
  
const now = (new Date).toISOString()  
  
this.eventDetail = `${now}: ${evt.detail}`  
  
}  
  
}  
  
}  
  
</script>  

（编辑：温州站长网）

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