快应用的变乱监听机制和组件间通讯

示譬喻下：

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

两点留意