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

示例如下：

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

两点注意