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

示例如下：

<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> 

解释一下

上面的代码中有几点需要说明：

（编辑：我爱故事小小网_铜陵站长网）

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