Component 构造器
收藏我的收藏
Component 构造器可用于定义组件,调用 Component 构造器时可以指定组件的属性、数据、方法等。
代码示例
js
复制Component({
behaviors: [],
properties: {
myProperty: {
// 类型(必填),目前可使用的类型包括:String, Number, Boolean, Object, Array,Function, null(表示 any 类型)
type: String,
// 属性的默认值 (可选), 如果没有特别指定,会根据类型指定一个默认值
value: "",
// 当属性改变时执行的函数(可选),方法名称也可以是字符串,如:'_myPropertyChange'
observer(newVal, oldVal) {
// newVal 是属性更新后的新值,oldVal 是更新前的旧值
},
},
// 简易写法
myPropertyB: String,
},
// 自定义组件内部数据,可用于视图渲染
data: {},
// 生命周期方法
attached() {
this.selectComponent(".class-name", (res) => {
console.log(res);
});
},
ready() {},
lifetimes: {
// lifetimes 中定义的生命周期方法优先级更高
attached() {},
// ....
},
// 组件的自定义方法
methods: {
onMyButtonTap() {
this.setData({});
},
_myPrivateMethod() {
// 将 data.A[0].B 更新为 'test'
this.setData({
"A[0].B": "test",
});
},
_myPropertyChange(newVal, oldVal) {},
},
});
使用 Component 构造器构造页面
小程序的页面也可以视为自定义组件。因此页面也可以使用 Component 构造器构造,拥有与普通组件一样的定义与实例方法。
此时,组件的属性可以用于接收页面的参数,如访问页面
/pages/index/index?paramA=123¶mB=xyz
,如果声明有属性 paramA
或 paramB
,则它们会被赋值为 123
或 xyz
。代码示例
在组件代码中
js
复制Component({
properties: {
paramA: Number,
paramB: String,
},
methods: {
onLoad() {
// Page parameter paramA value
console.log(this.data.paramA);
// Page parameter paramB value
console.log(this.data.paramB);
},
},
});
使用
Component
构造器来构造页面的一个好处是可以使用 behaviors
来提取所有页面中公用的代码段。例如,在所有页面被创建和销毁时都要执行同一段代码,就可以把这段代码提取到
behaviors
中。代码示例
js
复制// page-common-behavior.js
module.exports = Behavior({
attached() {
// 页面创建时执行
console.info("Page attached!");
},
detached() {
// 页面销毁时执行
console.info("Page detached!");
},
});
js
复制// 页面 A
const pageCommonBehavior = require("./page-common-behavior");
Component({
behaviors: [pageCommonBehavior],
data: {
/* ... */
},
methods: {
/* ... */
},
});
js
复制// 页面 B
const pageCommonBehavior = require("./page-common-behavior");
Component({
behaviors: [pageCommonBehavior],
data: {
/* ... */
},
methods: {
/* ... */
},
});
Bug & Tip
- •Tip: 在
properties
定义中,属性名采用驼峰写法(propertyName
)。在 ttml
中,指定属性值时则对应使用连字符写法(my-component property-name="value"
),应用于数据绑定时采用驼峰写法(attr="{{propertyName}}"
);- •Tip: 直接对
data
中的属性赋值不会引起视图变化。我们建议将不参与视图渲染的数据放到自定义段中,例如 pureData
,通过赋值的方式修改数据而非 setData
,从而避免页面产生不必要的重渲染导致性能劣化;- •Bug: 需要避免使用
on
/bind
/catch
/capture-bind
/capture-catch
开头的属性命名,会被基础库识别为事件名从而导致属性传递失效。
点击纠错