组件属性--@item

@item=item组件,我们在item配置中可以嵌套使用item/tree/list组件,以应对复杂的需求

在ITEM组件中嵌套使用item组件

组件属性使得ITEM结构中可以包含其他定义的组件,我们通过前缀符号@定义组件属性,目前我们可以使用@item, @list, @tree等组件属性,而无需调整模板

嵌套使用

组件属性可以嵌套使用,结构属性-li支持4层嵌套结构,使用组件属性可支持多于4层的嵌套结构。但组件属性的输出结构会多出一层容器层.

独立的组件对象

当一个ITEM组件由一些组件属性构成时,这些组件属性本身也是一个独立的组件实例,通过getElementsById方法可以获得它们的实例对象

基础语法

  const app = getApp()
  const Pager = require('components/aotoo/core')
  Pager({
    data: {
      motto: Pager.item({
        title: '使用ITEM组件完成复杂结构',
        "@item": {
          $$id: 'myitem',
          show: true,
          title: '嵌套使用item组件',
          itemClass: 'dropdown-list'
        }
      })
    },
    onLoad: function(){
      const motto = Pager.getElementsById('motto')  // 获得原生item组件的实例
      const myItem = Pager.getElementsById('myitem')   // 获得组件属性的实例
      myItem.hide()
    }

哈哈,你有没有发现,上述代码差不多实现了一个下拉菜单的组件

示例

下面的代码配合li属性实现结构嵌套生成

  Pager({
    data: {
      motto: Pager.item({
        title: '使用ITEM组件完成复杂结构',
        "@item": {
          show: true,
          title: '表层item组件'
        },
        li: [
          {
            title: 'li子项-1', 
            li: [
              {
                title: 'li子项-1-1',
                "@item": {
                  show: true,
                  title: '嵌套item组件'
                }
              }
            ]
          }
        ]
      })
    },

上例中我们为ITEM数据配置了两个@item组件属性,一个作为第三层嵌套结构,一个作为表层结构,总之使用@item能够灵活的为数据扩展新的内容