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

定义参数

选项名类型是否必填说明
properties Object 否组件的对外属性，是属性名到属性设置的映射表，属性设置中可包含三个字段，type 表示属性类型、value 表示属性初始值、observer 表示属性值被更改时的响应函数
data Object 否组件的内部数据，和 properties 一同用于组件的模版渲染
methods Object 否组件的方法，包括事件响应函数和任意的自定义方法，关于事件响应函数的使用，参见组件事件
behaviors String/Array 否类似于 mixins
created Function 否组件生命周期函数，在组件实例进入页面节点树时执行，注意此时不能调用setData
attached Function 否组件生命周期函数，在组件实例进入页面节点树时执行
ready Function 否组件生命周期函数，在组件布局完成后执行
moved Function 否组件生命周期函数，在组件实例被移动到节点树另一个位置时执行
detached Function 否组件生命周期函数，在组件实例被从页面节点树移除时执行
options Object 否其他选项
生成的组件实例可以在组件的方法、生命周期函数和属性 observer 中通过 this 访问。组件包含一些通用属性和方法。

通用属性列表

属性名类型说明
is String 组件的文件路径
id String 节点 id
dataset String 节点 dataset
data Object 组件数据
properties Object 组件数据
方法列表

方法名参数及其类型说明
setData Object data 设置 data
hasBehavior Object behavior 检查组件是否具有 behavior
triggerEvent String eventName, Object detail, Object options 触发事件
代码示例

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 () { },
ready: function() { },

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

扫描二维码关注公众号，回复： 4124762 查看本文章

_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 的值
}
}
})
注意：此功能正在逐步支持中，可能会存在不符合预期的问题

头条小程序Component构造器

定义参数

使用 Component 构造器构造页面

猜你喜欢