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

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>  

（编辑：湖南网）

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