组件的使用 avalon.component("组件名",{})

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 组件被移除时触发

转载于:https://www.cnblogs.com/webuserlast/p/6600285.html