小程序的超级组件(一)，item组件
 小程序的超级组件(二)，list组件
 如何引入QUERYUI

在上两篇文章中我们介绍了两个超级组件ITEM，LIST，虽然这两个组件很强，但依然不能满足业务的需求，为了灵活的应对复杂结构，我们引入了内嵌组件和外嵌组件两个帮手

内嵌组件

内嵌组件不需要额外引入模板，直接嵌入在其他组件中使用的组件，内嵌组件基于寻址算法，会自动处理父子级的组件关系，比如子级使用父级定义的方法，或者Page中定义的方法下列是常用的内嵌组件

@item
@list
@tree
@url
@md
@html
@form

比如我们在item组件中需要引入一个列表组件

wxml

<ui-item item="{{itemConfig}}" />

Pager({
  data: {
    itemConfig: {
      title: '列表标题',
      "@list": {
        listClass: 'list-class-name'
        data: [...]
      }
    }
  }
})

如何在Pager中查找组件实例并使用其API方法

Pager({
  data: {
    item: {/* item配置*/},  // ?id = 'abc'
    list: {/* list配置*/}  // ?id = 'xyz'
  }
  onReady(){
    let abc = this.getElementsById('#abc')
    abc.update({title: '新标题'})

    let xyz = this.getEelementsById('#xyz')
    xyz.forEach(item=>{
      // item.addclass/removeClass/hasClass/css/update... 等类jquery的API方法
    })

    this.find('.class-name').addClass('other-class-name') // 批量追加类名
  }
})

外嵌组件

内嵌组件一般有官方定义，外嵌组件支持用户自定义，可以根据不同的需求定制模板

在哪里定义外嵌组件

如下结构示例中打勾的文件

components 
  ├─ aotoo 核心代码必须有
  ├─ form  表单组件
  ├─ markit  文档组件
  ├─ modules
  ├─ templates.wxml 模板 ✔︎

如何定义外嵌组件

打开templates.wxml文件，定义一个模板

<template name="@abc"> 
  <block wx:if="{{util.isObject(props)}}">
    <view>...</view>
  </block>
</template>

上例中定义了一个模板@abc，我们需要传递一个props的参数给模板，然后输出结构

如何使用外嵌组件

内嵌组件中，我们定义了一个调用外嵌组件的属性@ext，使用它则可以调用外嵌组件，下例示例中通过item组件来调用

item的wxml

<ui-item item="{{itemConfig}}" />

item的配置

itemConfig = {
  title: '这是一个item组件的定义',
  "@ext": {  // 通过@ext调用外嵌组件并传递参数
    is: '@abc',
    property1: '',  // @ext的is属性调用@abc模板，并将所有子属性打包为props参数传递
    data: [...],
    name: {},
    property2: ''
  }
}

通过@ext.is调用选择的模板，@ext的其他属性将作为参数传递

queryui中的内嵌组件