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 | 否 | 组件生命周期函数,在组件实例被从页面节点树移除时执行 |
relations | Object | 否 | 组件间的关系定义,参加组件间关系 |
options | Object | 否 | 其他选项 |
lifetimes | Object | 否 | 组件生命周期声明对象,优先级比同级的 attached、detached 等生命周期优先级高 |
definitionFilter | Function | 否 | 定义过滤器,用于自定义组件扩展,参见自定义组件扩展 |
生成的组件实例可以在组件的方法、生命周期函数和属性 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 | 触发事件 |
selectComponent | String selector , Function callback | 使用选择器选择组件实例节点,返回匹配到的第一个组件实例对象,此方法为异步方法,返回值会在请求完成后传入 callback |
selectAllComponents | String selector , Function callback | 使用选择器选择组件实例节点,返回匹配到的全部组件实例对象组成的数组,此方法为异步方法,返回值会在请求完成后传入 callback |
getRelationNodes | String relationKey , Function callback | 获取这个关系所对应的所有关联节点,参见 组件间关系。 此方法为异步方法,返回值会在请求完成后传入 callback |
提示
selectComponent
、selectAllComponents
、getRelationNodes
API 均为异步 API,需要指定回调函数。
提示
selectComponent
、selectAllComponents
支持同步写法。开发者需要保证在调用 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¶mB=xyz
,如果声明有属性 paramA
或 paramB
,则它们会被赋值为 123
或 xyz
。
代码示例
{
"usingComponents": {}
}
在组件代码中
Component({
properties: {
paramA: Number,
paramB: String,
},
methods: {
onLoad() {
this.data.paramA; // Page parameter paramA value
this.data.paramB; // Page parameter paramB value
},
},
});
点击纠错
评价此篇文档