自定义组件

---

Component(Object object)

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

参数

Object object

定义段	类型	是否必填	描述
properties	Object Map	否	组件的对外属性，是属性名到属性设置的映射表，不会进行类型强制转换
data	Object	否	组件的内部数据，和 properties 一同用于组件的模板渲染
methods	Object	否	组件的方法，包括事件响应函数和任意的自定义方法，关于事件响应函数的使用
behaviors	Array	否	类似于mixins和traits的组件间代码复用机制，参见 Behaviors
created	Function	否	组件生命周期函数-在组件实例刚刚被创建时执行
attached	Function	否	组件生命周期函数-在组件实例进入页面节点树时执行
ready	Function	否	组件生命周期函数-在组件布局完成后执行
detached	Function	否	组件生命周期函数-在组件实例被从页面节点树移除时执行

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

属性名	类型	描述
data	Object	组件数据，包括内部数据

方法名	参数	描述
setData	Object newData	设置data并执行视图层渲染
triggerEvent	String name, Object detail, Object options	触发事件

代码示例：

Component({

  behaviors: [],

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

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

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
  ready: function() { },

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

  methods: {
    onMyButtonTap: function(){
      this.setData({
        // 更新属性和数据的方法与更新页面数据的方法类似
      })
    },
    // 内部方法建议以下划线开头
    _myPrivateMethod: function(){
      // 这里将 data.A[0].B 设为 'myPrivateData'
      this.setData({
        'A[0].B': 'myPrivateData'
      })
    },
    _propertyChange: function(newVal, oldVal) {

    }
  }

})

properties 定义

定义段	是否必填	描述
type	是	属性的类型
value	否	属性的初始值

代码示例：

Component({
  behaviors: [],

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

Behavior(Object object)

注册一个 behavior，接受一个 Object 类型的参数。

参数

Object object

定义段	类型	是否必填	描述
properties	Object Map	否	同组件的属性
data	Object	否	同组件的数据
methods	Object	否	同自定义组件的方法
created	Function	否	生命周期函数
attached	Function	否	生命周期函数
ready	Function	否	生命周期函数
detached	Function	否	生命周期函数

代码示例：

// my-behavior.js
module.exports = Behavior({
  behaviors: [],
  properties: {
    myBehaviorProperty: {
      type: String
    }
  },
  data: {
    myBehaviorData: {}
  },
  attached: function(){},
  methods: {
    myBehaviorMethod: function(){}
  }
})