字节跳动小程序开发框架 Component 构造器

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

定义参数

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

通用属性列表

方法列表

提示

selectComponent、selectAllComponents、getRelationNodes API 均为异步 API，需要指定回调函数。

提示

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

代码示例

Component({
  behaviors: [],

  properties: {
    myProperty: {
      // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      type: String,

      // 属性初始值（可选），如果未指定则会根据类型选择一个
      value: '',

      // 属性被改变时执行的函数（可选），也可以写成在 methods 段中定义的方法名字符串, 如：'_propertyChange'
      observer: function(newVal, oldVal, changedPath) {
         // 通常 newVal 就是新设置的数据， oldVal 是旧数据
      }
    },
    myPropertyB: String // 简化的定义方式
  },

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

  // 生命周期函数，可以为函数，或一个在 methods 段中定义的方法名
  attached: function () { 
    this.selectComponent('.class-name', function(res) {
      console.log(res)
    })

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

  // 组件自定义方法
  methods: {
    onMyButtonTap: function(){
      this.setData({ ... })
    },

    _myPrivateMethod: function(){
      // 这里将 data.A[0].B 设为 'test'
      this.setData({
        'A[0].B': 'test'
      })
    },

    _propertyChange: function(newVal, oldVal) {

    }
  }
})

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

使用 Component 构造器构造页面

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

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

代码示例

{
  "usingComponents": {}
}

在组件代码中

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

  methods: {
    onLoad() {
      this.data.paramA // 页面参数 paramA 的值
      this.data.paramB // 页面参数 paramB 的值
    }
  }
})

注意：此功能正在逐步支持中，可能会存在不符合预期的问题