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

提及变乱，做前端开拓的伴侣必然不会生疏。变乱，即网页上的一系列举动，可所以赏识器举动，如页面完成了加载，页面封锁；或是用户操纵举动，如用户输入操纵，用户点击按钮等，这些举动会被JavaScript监测到，并执行响应的逻辑代码。可以说，前端的交互举动与变乱机制痛痒相干，对付前端开拓者而言，把握功德件机制是绝对须要的。

所谓组件，即封装起来的具有独立成果的UI部件。试想，假如开拓一个伟大的页面，开拓者把全部的UI部门写在一个文件中，这样的代码显然可维护性很低。但我们假如用组件的方法去从头思索UI组成，将UI上每一个成果相对独立的模块界说成组件，然后将小的组件通过组合可能嵌套的方法组成大的组件，进而完成整体UI的开拓。这样，我们不只进步了代码的复用性，且整体布局清楚，维护性则大大进步。

组件化界面

本文将先容在快应用开拓中，变乱相干的首要API以及变乱的监听、触发机制，同时会先容快应用中组件是怎样通讯的。阅读本文前，提议先相识快应用相干基本常识。

自界说变乱的监听、移除与触发

$on 用于监听自界说变乱；$off移除对应的变乱监听；$emit()、$dispatch()、 $broadcast()等要领可用于触发变乱。

$on(evtName, fnHandler)变乱

在当前页面注册监听变乱， 可监听$emit()、 $dispatch()、 $broadcast()等触发的自界说变乱，不能用于注册组件节点的变乱相应。

示譬喻下：

export default {  
onInit(){  
this.$on('customEvtType1', this.customEvtType1Handler)  
},  
customEvtType1Handler(evt){  
// 变乱范例，变乱参数  
console.info(`触发变乱：范例：${evt.type}, 参数： ${JSON.stringify(evt.detail)}`);  
}  
} 

表明一下

'customEvtType1'为该组件上自界说的变乱名称，customEvtType1Handler为当'customEvtType1'变乱被触发时，要执行的回调函数。

$off(evtName, fnHandler)

移除变乱监听，，参数 fnHandler 为可选，转达仅移除指定的相应函数，不转达则移除此变乱的全部监听。

示譬喻下：

export default {  
removeEventHandler () {  
// 不转达fnHandler：移除全部监听  
this.$off('customEvtType1')  
// 转达fnHandler：移除指定的监听函数  
this.$off('customEvtType1', this.customEvtType1Handler)  
}  
} 

页面的交互中也许会碰着一些非手动触发的需求，$emit() 通过触发当前实例上的变乱，到达动态触发变乱的举动，相同jquery中的trigger要领。

$emit(evtName, evtDetail)

触发当前实例监听变乱函数，与 $on() 共同行使，留意：$emit() 今朝只触发 $on 所监听的变乱

示譬喻下：

export default {  
emitEvent () {  
this.$emit('customEvtType1', { params: '参数内容' })  
}  
} 

监听原生组件变乱

原生组件即框架自带的组件，如div，text等等，其支持一系列变乱，如通用变乱（如：click, disappear）、组件专有变乱（如：focus）。完备的原生组件列表以及变乱可在快应用官网查询到。

开拓者可以在变乱回调函数中，获取到当前触发组件的信息，并举办进一步的操纵。

在相应函数执行时通过target获取，如：onClickHandler

在相应函数绑按时转达参数，如：onClickHandler2

示譬喻下：

<template>  
<div class="tutorial-page">  
<text id="elNode1" item-flag="{{ argName + 1 }}" onclick = "onClickHandler">组件节点1</text>  
<text id="elNode2" item-flag="{{ argName + 2 }}" onclick = "onClickHandler2('参数1', argName)">组件节点2</text>  
</div> 
 
</template>  
<style lang="less">  
.tutorial-page {  
flex-direction: column;  
}  
</style> 
 
<script>  
export default {  
data () {  
return {  
argName: '动态参数'  
}  
}, 
 
onClickHandler (evt) {  
// 变乱范例，参数详情  
console.info(`触发变乱：范例：${evt.type}, 详情： ${JSON.stringify(evt.detail)}`);  
if (evt.target) {  
console.info(`触发变乱：节点：${evt.target.id}, ${evt.target.attr.itemFlag}`)  
}  
}, 
 
onClickHandler2 (arg1, arg2, evt) {  
// 变乱范例，变乱参数，target  
console.info(`触发变乱：范例：${evt.type}, 参数： ${arg1}, ${arg2}`);  
}  
}  
</script> 

表明一下

onClickHandler函数假如不传参数，默认参数env即为当前触发组件的实例；若转达了参数，如onClickHandler2，则参数安次序分列，env为最后一个参数。

触发原生组件变乱

用户可通过手动操纵触发变乱，如点击变乱等，除此之外，也可以在代码中通过$emitElement()完成变乱的动态触发，相同上文自界说组件中的$emit()要领。

$emitElement(evtName, evtDetail, id)

可以触发指定组件id的变乱，通过evt.detail获取转达的参数；该要领仅用于原生组件，对自界说组件无效。

（编辑：河北网）

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