开发
API

Component 构造器

Component 构造器可用于定义组件,调用 Component 构造器时可以指定组件的属性、数据、方法等

定义参数

选项名类型是否必填说明
propertiesObject组件的对外属性,是属性名到属性设置的映射表,属性设置中可包含三个字段,type 表示属性类型、value 表示属性初始值、observer 表示属性值被更改时的响应函数
dataObject组件的内部数据,和 properties 一同用于组件的模版渲染
methodsObject组件的方法,包括事件响应函数和任意的自定义方法,关于事件响应函数的使用,参见组件事件
behaviorsString/Array类似于 mixins
createdFunction组件生命周期函数,在组件实例进入页面节点树时执行,注意此时不能调用setData
attachedFunction组件生命周期函数,在组件实例进入页面节点树时执行
readyFunction组件生命周期函数,在组件布局完成后执行
movedFunction组件生命周期函数,在组件实例被移动到节点树另一个位置时执行
detachedFunction组件生命周期函数,在组件实例被从页面节点树移除时执行
relationsObject组件间的关系定义,参加组件间关系
optionsObject其他选项
lifetimesObject组件生命周期声明对象,优先级比同级的 attached、detached 等生命周期优先级高
definitionFilterFunction定义过滤器,用于自定义组件扩展,参见自定义组件扩展

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

通用属性列表

属性名类型说明
isString组件的文件路径
idString节点 id
datasetString节点 dataset
dataObject组件数据(内部数据)
propertiesObject组件数据(对外属性)

方法列表

方法名参数及其类型说明
setDataObject data设置 data
hasBehaviorObject behavior检查组件是否具有 behavior
triggerEventString eventName, Object detail, Object options触发事件
selectComponentString selector, Function callback使用选择器选择组件实例节点,返回匹配到的第一个组件实例对象,此方法为异步方法,返回值会在请求完成后传入 callback
selectAllComponentsString selector, Function callback使用选择器选择组件实例节点,返回匹配到的全部组件实例对象组成的数组,此方法为异步方法,返回值会在请求完成后传入 callback
getRelationNodesString relationKey , Function callback获取这个关系所对应的所有关联节点,参见 组件间关系。 此方法为异步方法,返回值会在请求完成后传入 callback

提示

selectComponentselectAllComponentsgetRelationNodes API 均为异步 API,需要指定回调函数。

提示

selectComponentselectAllComponents 支持同步写法。开发者需要保证在调用 API 时,页面已经渲染完毕,比如页面的 onReady、setData 的回调之后。

代码示例

Component({
  behaviors: [],

  properties: {
    myProperty: {
      // Type (required), currently accepted types include: String, Number, Boolean, Object, Array, null (indicating any type)
      type: String,

      // The initial value of the attribute (optional), if not specified, one will be selected according to the type
      value: '',

      // The function (optional) executed when the property is changed can also be written as the method name string defined in the methods section, such as:'_myPropertyChange'
      observer: function(newVal, oldVal) {
         // Usually newVal is the newly set data, oldVal is the old data
      }
    },
    myPropertyB: String // Simplified definition
  },

  // Private data, can be used for template rendering
  data: {},

  // Life cycle function, which can be a function or a method name defined in the methods section
  attached: function () {
    this.selectComponent('.class-name', function(res) {
      console.log(res)
    })

    //
  },
  ready: function() { },

  lifetimes: {
  	//  Support all life cycles
    attached() {},
    // ....
  },

  // Component custom method
  methods: {
    onMyButtonTap: function(){
      this.setData({ ... })
    },

    _myPrivateMethod: function(){
      // set data.A[0].B to'test'
      this.setData({
        'A[0].B': 'test'
      })
    },

    _myPropertyChange: function(newVal, oldVal) {

    }
  }
})

注意:在 properties 定义中,属性名采用驼峰写法(propertyName);在 ttml 中,指定属性值时则对应使用连字符写法(my-component property-name="value"),应用于数据绑定时采用驼峰写法(attr="{{propertyName}}")。

使用 Component 构造器构造页面

小程序的页面也可以视为自定义组件。因而,页面也可以使用 Component 构造器构造,拥有与普通组件一样的定义与实例方法。但此时要求对应 json 文件中包含 usingComponents 定义段。

此时,组件的属性可以用于接收页面的参数,如访问页面 /pages/index/index?paramA=123&paramB=xyz ,如果声明有属性 paramAparamB ,则它们会被赋值为 123xyz

代码示例

{
  "usingComponents": {}
}

在组件代码中

Component({
  properties: {
    paramA: Number,
    paramB: String,
  },

  methods: {
    onLoad() {
      this.data.paramA; // Page parameter paramA value
      this.data.paramB; // Page parameter paramB value
    },
  },
});
点击纠错
评价此篇文档