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

说起事件，做前端开发的朋友一定不会陌生。事件，即网页上的一系列行为，可以是浏览器行为，如页面完成了加载，页面关闭；或是用户操作行为，如用户输入操作，用户点击按钮等，这些行为会被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获取传递的参数；该方法仅用于原生组件，对自定义组件无效。

（编辑：核心网）

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