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

示例如下：

<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触发。

自定义组件

（编辑：PHP编程网 - 湛江站长网）

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