快应用----组件
自定义组件：
为了更好的组织逻辑与代码，可以把页面按照功能拆成多个模块，每个模块负责其中一个功能部分，最后页面将这些模块引入管理起来，传递业务与配置数据完成代码分离；
注意：自定义组件中数据模型只能使用data属性，data类型可以是Object 或 Function 。如果是函数，返回结果必须是对象；
组件的引入：
<import name="xxx" src="xxx"></import>在该标签中，src属性指定自定义组件的地址，name属性指定在父组件中引用该组件时使用的标签名称；
父子组件通信：
1）父组件通过Prop向子组件传递数据
父组件向子组件传递数据，通过在子组件的props属性中声明对外暴露的属性名称，然后在组件引用标签上声明传递的父组件数据；
例如：
子组件--> props:['say','propObject']
父组件---> <import name="comp" src="./comp"></import>
<comp say="{{say}}" prop-object="{{obj}}"></comp>
2) 子组件对父组件通信
当子组件对数据进行改造后，把最终数据交给父组件甚至往上，有三种办法
a) 父组件传递的数据本身就是对象，子组件直接修改对象中的属性，父组件的值也会发生改变，不推荐这种；
b) 子组件通过 $dispatch()触发自定义事件，父组件通过 $on()监控自定义事件的触发，如
父组件--->
onInit(){
this.$on('dispathEvt',this.dispathEvt);
}
dispathEvt(evt){
this.num = evt.detail.num
}
子组件---->
<input type="button" onclick="delHandler" value="del"></input>
delHandler(){
this.$dispatch('dispatchEvt',{ num: this.compNum});
}
c) 子组件通过$emit()触发在节点上绑定的自定义事件来执行父组件中的方法，如：
父组件---->
<comp count="{{count}}" onemitEvt="emitEvt"></comp>
emitEvt(evt){
this.count = evt.detail.count;
}
子组件---->
<input type="button" onclick="addHandler" value="add"></input>
addHandler(){
this.compCount++
this.$emit('emitEvt',{ count: this.compCount})
}
框架向开发者提供了双向的事件传递
1)向下传递：父组件触发，子组件响应；调用parentVm.$broadcast()完成向下传递；
例如：
父组件---->
<input type="button" onclick="evtTypeEmit" value="触发$broadcast()"></input>
evtTypeEmit(){
this.$broadcast('broadevt',{ age: 19});
}
子组件--->
broadevt(evt){
this.compAge = evt.detail.age;
}
2) 向上传递： 子组件触发，父组件响应；调用childVm.$dispath()完成向上传递
提示： 触发时传递参数，再接收时使用evt.detail来获取参数；
当传递结束后，可以调用evt.stop()来结束传递，否则会一直传递下去；
兄弟组件通信：
传统的兄弟等非父子组件之间通信，是通过Publish/Subscribe模型来完成。
开发者如果想要使用这样的能力，当然可以自己写一个Pub/Sub模型实现通信解耦；当然在业务逻辑相对简单的情况下，也可以使用ViewModel本身的事件绑定来处理：$on(),$emit();
例如：
子组件定义了Sub端的逻辑处理，有processMessage(),customEventInVm2(),
processMessage(msg){
const now = new Date().toISOString();
this.msg = `${now}:${msg}`;
}
//通过events对象：绑定事件
events: {
customEventInVm2(evt){
const now = new Date().toISOString();
this.eventDetail = `${now}:${evt.detail}`
}
}
另一个兄弟组件可以通过父组件中建立相互引用达到互相持有ViewModel的目的，通过在声明周期onReady()中执行establishRef()实现，如：
//兄弟VM通信
<comp-part2 id="siblings1"></comp-part2>
<comp-part3 id="siblings2"></comp-part3>
<script>
onReady(){
this.establishRef();
}
//建立相互VM的引用
establishRef(){
const siblingsVm1 = this.$vm('siblings1');
const siblingsVm2 = this.$vm('siblings2');
siblingsVm1.parentVm = this;
siblingsVm1.nextVm = siblingsVm2;
siblingsVm2.parentVm = this;
siblingsVm2.previousVm = siblingsVm1;
}
</script>
那么另外一个子组件的Pub端定义就简单多了，执行sendMessage()即可完成触发；
sendMessage(){
if(this.previousVm){
//way1:调用方法
this.previousVm.processMessage('兄弟之间通信的消息内容');
//way2:触发事件
this.previousVm.$emit('customEventInVm2','兄弟之间通信的消息内容');
}
}
