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

上文曾提到原生组件，通常原生组件是我们系统中最基础的组件，然而我们在做一个稍微复杂的页面时，如果每个页面都只用原生组件搭建，那这样的代码的可维护性会差很多。打个比方，就好比一个人口众多的国家，没有省、市、县这些单位，而是只以个人为单位，难以想象这个国家的管理将有多难。道理类似，自定义组件，我们可以根据具体的业务逻辑，把页面按照功能拆成多个模块，每个模块负责其中的一个功能部分，最后页面将由这些模块组合搭建起来，让代码结构更加清晰，易于维护。

自定义组件是开发者编写的组件，使用起来和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> 

两点注意