1)组件的定义:
avalon.component("组件名",{
template:"",
defaults:{
},
soleSlot:""//可选
});
使用:
<xmp ms-widget="{is:'组件名',args1:'',arges2:''}"></xmp> 或 <xmp is="组件名" ms-widget="{args1:'',arges2:''}"></xmp>
<wbr ms-widget="{is:'组件名',args1:'',arges2:''}"></wbr> 或 <wbr is="组件名" ms-widget="{args1:'',arges2:''}"></wbr>
<template ms-widget="{is:'组件名',args1:'',arges2:''}"></template> 或 <template is="组件名" ms-widget="{args1:'',arges2:''}"></template>
已不建议用数组的形式定义,如:<xmp ms-widget="[{is:'组件名'},{args1:'',arges2:''}]"></xmp>此形式!!!
以组件名为标签的写法(必须是ms-开头,是闭合标签)
如:<ms-button ></ms-button>
放在xmp或template容器里,则允许是自闭合标签
2)插槽元素和插卡元素
在template中 '<div><span><slot name="content1"/></span><slot name="content2"/></div>,蓝色部分就是插槽元素
使用组件时,在容器内
<xmp ms-widget="{is:'组件名'}">
<div>部分内容</div>
<div slot="content2">some code</div> 红色部分就是插卡元素,根据slot的名字,插入到对应的位置
</xmp>
只有一个插槽时,可定义为单插槽或匿名插槽 如:
template中写法:<div><p><slot /></p></div> 蓝色部分为插槽,不需再定义name 名
defaults:{
buttonText:"button"
}
组件中可选的soleSlot必须写上
soleSlot:"buttonText"
3)生命周期
defaults对象里预设的四个函数 onInit onReady onViewChange onDispose
执行顺序:onInit -> onReady -> onViewChange -> onDispose
onInit vm创建完毕执行
onReady 虚拟DOM创建完毕执行
onViewChange 组件内有属性或文本内容被改变时触发
onDispose 组件被移除时触发