Component(Object object)

创建自定义组件，接受一个 Object 类型的参数。

参数

Object object

生成的组件实例可以在组件的方法、生命周期函数和属性 observer 中通过 this 访问。组件包含一些通用属性和方法。

示例代码：

Component({

  behaviors: [],

  properties: {
    myProperty: { // 属性名
      type: String,
      value: ''
    },
    myProperty2: String // 简化的定义方式
  },

  data: {}, // 私有数据，可用于模板渲染

  observers: {
    'myProperty': function(subfield){
      //监听变化
    }
  },
  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    created: function() { },
    attached: function () { },
    ready: function () { },
    moved: function () { },
    detached: function () { },
    error: function () { }
  },
  relations: {
    './custom-ul-component': {
      type: 'parent', // 关联的目标节点应为父节点
      linked: function (target) {
        // 每次被插入到custom-ul时执行，target是custom-ul节点实例对象，触发在attached生命周期之后

      }
    },
  },
  externalClasses: ['my-class'],

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  created: function() { },
  attached: function () { },
  ready: function () { },
  moved: function () { },
  detached: function () { },
  error: function () { }

  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show: function () { },
    hide: function () { },
    resize: function () { },
  },

  methods: {
    customTap: function(){
      this.setData({
        // 更新属性和数据的方法与更新页面数据的方法类似
      })
    }
  }

})

注意：在 properties 定义段中，属性名采用驼峰写法（propertyName）；在 mcml 中，指定属性值时则对应使用连字符写法（component-tag-name property-name="attr value"），应用于数据绑定时采用驼峰写法（attr=""）。

properties

属性值的改变情况可以使用 observer 来监听。目前，在新版本基础库中不推荐使用这个字段，而是使用 Component 构造器的 observers 字段代替，它更加强大且性能更好。

示例代码

Component({
  properties: {
    min: {
      type: Number,
      value: 0
    },
    min: {
      type: Number,
      value: 0,
      observer: function(newVal, oldVal) {
        // 属性值变化时执行
      }
    },
    lastLeaf: {
      // 这个属性可以是 Number 、 String 、 Boolean 三种类型中的一种
      type: Number,
      optionalTypes: [String, Object],
      value: 0
    }
  }
})

属性的类型可以为 String Number Boolean Object Array 其一，也可以为 null 表示不限制类型。

多数情况下，属性最好指定一个确切的类型。这样，在 MCML 中以字面量指定属性值时，值可以获得一个确切的类型，如：

<custom-comp min="1" max="5" />

此时，由于自定义组件的对应属性被规定为 Number 类型， min 和 max 会被赋值为 1 和 5 ，而非 "1" 和 "5" ，即：

this.data.min === 1 // true
this.data.max === 5 // true

observers

数据监听器可以用于监听和响应任何属性和数据字段的变化。

使用数据监听器

有时，在一些数据字段被 setData 设置时，需要执行一些操作。

例如， this.data.sum 永远是 this.data.numberA 与 this.data.numberB 的和。此时，可以使用数据监听器进行如下实现。

Component({
  attached: function() {
    this.setData({
      numberA: 1,
      numberB: 2,
    })
  },
  observers: {
    'numberA, numberB': function(numberA, numberB) {
      // 在 numberA 或者 numberB 被设置时，执行这个函数
      this.setData({
        sum: numberA + numberB
      })
    }
  }
})

监听字段语法

Component({
  observers: {
    '**': function() {
      // 监听全部 setData 。
      // 每次 setData 都触发
    },
    'some' : function(subfield){
      //触发
      /*this.setData({
        some: ''
      })*/
    },
    'some.field' : function(subfield){
      //触发
      /*this.setData({
        'some.field': ''
      })*/
    },
    'some.field.user' : function(subfield){
      //触发
      /*this.setData({
        'some.field.user': ''
      })*/
    },
    'some.field.**' : function(subfield){
      //触发
      /*this.setData({
        'some.field.user': ''
      })*/
    },
    'some[1]' : function(subfield){
      //触发
      /*this.setData({
        'some[1]': ''
      })*/
    },
    'some[1].field' : function(subfield){
      //触发
      /*this.setData({
        'some[1].field': ''
      })*/
    },
    'some[1].field.**' : function(subfield){
      //触发
      /*this.setData({
        'some[1].field.user': ''
      })*/
    },
    'some.field[1]' : function(subfield){
      //触发
      /*this.setData({
        'some.field[1]': ''
      })*/
    },
    'some.field[1].**' : function(subfield){
      //触发
      /*this.setData({
        'some.field[1].user': ''
      })*/
    }
  }
})