- 当前位置：首页 >域名 >快应用的事件监听机制和组件间通信
快应用的事件监听机制和组件间通信
发布时间：2025-11-02 18:55:17 来源：创站工坊 作者：IT科技
说起事件，事件做前端开发的监听机制件间朋友一定不会陌生。事件，和组即网页上的通信一系列行为，可以是事件浏览器行为，如页面完成了加载，监听机制件间页面关闭；或是和组用户操作行为，如用户输入操作，通信用户点击按钮等，事件这些行为会被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获取传递的参数；该方法仅用于原生组件，对自定义组件无效。
示例如下：
<template> <div class="tutorial-page"> <text onclick="emitElement">触发组件节点的事件：click</text> <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}`); }, emitElement () { // 注意：通过此类方式的事件不会携带target属性，开发者可以通过detail参数实现 this.$emitElement(click, { params: 参数内容 }, elNode1) } } </script>解释一下
Click事件可通过用户点击操作触发，也可通过$emitElement触发。
自定义组件
上文曾提到原生组件，通常原生组件是我们系统中最基础的组件，然而我们在做一个稍微复杂的页面时，如果每个页面都只用原生组件搭建，那这样的代码的可维护性会差很多。打个比方，就好比一个人口众多的国家，没有省、市、县这些单位，而是只以个人为单位，难以想象这个国家的管理将有多难。道理类似，自定义组件，我们可以根据具体的业务逻辑，把页面按照功能拆成多个模块，每个模块负责其中的一个功能部分，***页面将由这些模块组合搭建起来，让代码结构更加清晰，易于维护。
自定义组件是开发者编写的组件，使用起来和Native原生组件一样，最终按照组件的<template>来渲染；同时开发起来又和页面一样，拥有ViewModel实现对数据、事件、方法的管理，这么来看，页面也是一种特殊的自定义组件，无需引入即可使用，同时服务于整个页面。
编写自定义组件
示例如下：
<template> <div class="tutorial-page"> <text class="tutorial-title">自定义组件:</text> <text>{{ prop1 }}</text> <text>{{ prop2Object.name }}</text> </div> </template> <style lang="less"> .tutorial-page { flex-direction: column; padding-top: 20px; .tutorial-title { font-weight: bold; } } </style> <script> // 子组件 export default { props: [ prop1, prop2Object ], data: { }, onInit () { console.info(`外部传递的数据：`, this.prop1, this.prop2Object) } } </script>两点注意
一是自定义组件比页面组件的不同之处在于多了一个props属性，用于声明该组件可接受的外部数据传递；props是一个数组，数组中每个元素是暴露的属性。
二是如果属性名称使用驼峰定义，如：prop2Object，那么在外部传递数据时请使用-连接，如：prop2-object
引入自定义组件
引入自定义组件的方式和我们平时常用的方式不同，我们平时通常会用require或import的方式引入组件，而在快应用框架中，需要使用<import>标签来引入。
示例如下：
<import name="comp-part1" src="./part1"></import><import>标签中的的src属性指定自定义组件的地址，name属性指定在<template>组件中引用该组件时使用的标签名称
最终页面定义与引入方式如下：
<import name="comp-part1" src="./part1"></import> <template> <div class="tutorial-page"> <text class="tutorial-title">页面组件：</text> <text>{{ data1 }}</text> <text>{{ data2.name }}</text> <text onclick="evtType1Emit">触发$broadcast()</text> <comp-part1 prop1="{{data1}}" prop2-object="{{data2}}" onevt-type3="evtTypeHandler"></comp-part1> </div> </template> <style lang="less"> .tutorial-page { flex-direction: column; padding: 20px 10px; .tutorial-title { font-weight: bold; } } </style> <script> // 父组件 export default { data: { data1: 传递字符串, data2: { name: 传递对象 } }, onInit () { this.$page.setTitleBar({ text: 父子组件通信 }) this.$on(evtType2, this.evtTypeHandler) }, evtTypeHandler (evt) { console.info(`父组件：事件响应: `, evt.type, evt.detail) // 结束事件传递 // evt.stop() }, evtType1Emit () { this.$broadcast(evtType1, { params: 额外参数 }) } } </script>解释一下
上面的代码中有几点需要说明：
1 在comp-part1标签中，我们看到这样一个属性，onevt-type3="evtTypeHandler"，这是指，在该节点上绑定了名为evtType3的方法，被触发后，执行evtTypeHandler的函数，在下文的‘父子之间组件事件传递’中，会看到如何触发该方法。
2 代码中的evtType1Emit方法，该方法通过调用$broadcast方法，触发了名为evtType1的事件，并传递了params参数，evtType1事件也可以在下文‘父子组件之间事件传递’中看到。
传递数据与数据改造
如上面所述，父组件向子组件传递数据，通过在子组件的props属性中声明对外暴露的属性名称，然后在组件引用标签上声明传递的父组件数据。
如果你需要在子组件中对数据进行改造，但又不想改动父组件数据时，可以使用$watch()来满足需求。如果是监听对象中的属性，参数请使用.分割，如：$watch(xxx.xxx.xxx, methodName)
示例如下：
<script> // 子组件 export default { props: [ prop1, prop2Object ], data () { return { upperProp1: this.prop1 } }, onInit () { console.info(`外部传递的数据：`, this.prop1, this.prop2Object) // 监听数据变化 this.$watch(prop1, watchPropsChange) this.$watch(prop2Object.name, watchPropsChange) }, /** * 监听数据变化，你可以对数据处理后，设置值到data上 * @param newV * @param oldV */ watchPropsChange (newV, oldV) { console.info(`监听数据变化：`, newV, oldV) this.upperProp1 = newV && newV.toUpperCase() } } </script>解释一下
上面是子组件的代码，我们看到data中定义了upperProp1，同时也看到watchPropsChange方法中，有两个参数，一个是newV,指变化后的属性值，oldV指原先的属性值，将newV赋值给upperProp1，这样在子组件中对数据upperProp1进行改造，就不会改动父组件原先的数据。
父子组件之间的事件传递
当子组件对数据进行改造后，把最终数据交给父组件甚至往上，往往有两种办法
1、父组件传递的数据本身就是对象，子组件直接修改的就是这个对象中的属性；那么父组件同样也就拿到了最终数据
2、子组件在data中保存了一份内部数据，需要交给父组件：子组件通过$dispatch()完成事件触发，父组件通过$on()绑定事件并响应，如：evtType2；
类似于2，子组件在data中保存了一份内部数据，需要交给父组件：子组件通过$emit()触发在节点上绑定的事件来执行父组件的方法，如：evtType3；
示例如下：
<script> // 子组件 export default { props: [ prop1, prop2Object ], data () { return { upperProp1: this.prop1 } }, onInit () { console.info(`外部传递的数据：`, this.prop1, this.prop2Object) // 绑定VM的自定义事件 this.$on(evtType1, this.evtTypeHandler) // 这里我认为官网的代码示例存在问题，因此注释掉了，此处应该将其移至父组件的onInit方法中。 //this.$on(evtType2, this.evtTypeHandler) }, evtTypeHandler (evt) { console.info(`子组件：事件响应: `, evt.type, evt.detail) // 结束事件传递 // evt.stop() }, evtType2Emit () { this.$dispatch(evtType2, { params: 额外参数 }) }, evtType3Emit () { this.$emit(evtType3, { params: 额外参数 }) } } </script>解释一下
在上文我已做了如下说明
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>另外一个兄弟组件可以通过父组件中建立相互引用达到相互持有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>解释一下
通过上面的例子，我们可以看到，comp-part2和 comp-part3在父组件中通过nextVm和previousVm建立了‘兄弟关系’，基于此,它们之间可以直接调用对方的方法（如processMessage），或会通过$emit方法触发对方监听的事件customEventInVm2。
结尾
本文对快应用开发中的事件监听以及触发方式做了介绍，通过学习我们能够更好的分离业务逻辑，减少方法响应上的耦合。另外，通过掌握自定义组件的开发，会让我们的项目结构更加明朗，更易于维护；同时了解父子、兄弟组件之间的数据通信，更是完成好快应用开发的必要条件。当然，本文多数素材来源于官方文档中的示例，但对其中模糊之处做了相应解释和补充，希望能够给读者些许帮助。如有不足之处，欢迎指正。
- Copyright © 2025 Powered by 快应用的事件监听机制和组件间通信,创站工坊 滇ICP备2023006006号-44sitemap