学做小程序之自定义组件Component构造器
Component构造器
Component构造器可用于定义组件，调用Component构造器时可以指定组件的属性、数据、方法等。
定义段 类型 是否必填 描述
properties ObjectMap 否 组件的对外属性，是属性名到属性设置的映射表，属性设置中可包含三个字段，type表示属性类型、value表示属性初始值、observer表示属性被更改时的响应函数
data Object 否 组件的内部数据，和properties一同用于组件的模板渲染
methods Object 否 组件的方法，包括事件响应函数和任意的自定义方法，关于事件响应函数的使用，参见组件事件。
behaviors StringArray 否 类似于mixins和traits的组件间代码复用机制，参见behaviors。
created Function 否 组件生命周期函数，在组件实例进入页面节点树时执行，注意此时不能调用setData。
attached Function 否 组件生命周期函数，在组件实例进入页面节点树时执行
ready Function 否 组件生命周期函数，在组件布局完成后执行，此时可以获取节点信息（使用SelectorQuery）。
moved Function 否 组件生命周期函数，在组件实例被从页面节点树移除时执行。
relations Object 否 组件间关系定义，参见组件间关系。
externalClasses StringArray 否 组件接受的外部样式类，参见外部样式类。
options ObjectMap 否 一些组件选项，请参见文档其它部分的说明。
生成的组件实例可以在组件的方法、生命周期函数和属性observer中通过this访问。组件包含一些通用属性和方法。
属性名 类型 描述
is String 组件的文件路径
id String 节点id
dataset String 节点dataset
data Object 组件数据，包括内部数据和属性值
方法名 参数 描述
setData Object newData 设置data并执行视图层渲染
hasBehavior Object hehavior 检查组件是具有hehavior（检查时会递归检查被直接或间接引入的所有hehavior）
triggerEvent String name, Object detail, Object options 触发事件，参见组件事件
createSelectorQuery 创建一个SelectorQuery对象，选择器选取范围为这个组件实例内
selectComponent String selector 使用选择器选择组件实例节点，返回匹配到的第一个组件实例对象
selectAllComponents String selector 使用选择器选择组件实例节点，返回匹配到的全部组件实例对象组成的数组
getRelationNodes String relationKey 获取所有这个关系对应的所有关联节点，参见组件关系
代码示例：
Component({
behaviors: [],
properties: {
myProperty: {// 属性名
type: String,// 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
value:'',// 属性初始值（可选），如果未指定则会根据类型选择一个
observer:function(newVal, oldVal) { }// 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串, 如：'_propertyChange'
},
myProperty2: String// 简化的定义方式
},
data: {},// 私有数据，可用于模版渲染
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached:function() { },
moved:function() { },
detached:function() { },
methods: {
onMyButtonTap:function() {
this.setData({
// 更新属性和数据的方法与更新页面数据的方法类似
})
},
_myPrivateMethod:function() {
// 内部方法建议以下划线开头
this.replaceDataOnPath(['A',,'B'],'myPrivateData')// 这里将 data.A[0].B 设为 'myPrivateData'
this.applyDataUpdates()
},
_propertyChange:function(newVal, oldVal) {
}
}
})
注意：
在properties定义段中，属性名采用驼峰写法（propertyName）；
在wxml中，指定属性值时则对应使用连字符写法（component-tag-name property-name="attr value"），应用于数据绑定时采用驼峰写法（attr="{}"）。
Tips:
Component构造器构造的组件也可以作为页面使用。
使用this.data可以获取内部数据和属性值，但不要直接修改它们，应使用setData修改。
生命周期函数无法在组件方法中通过this访问到。
属性名应避免以 data 开头，即不要命名成dataXyz这样的形式，因为在 WXML 中，data-xyz=""会被作为节点 dataset 来处理，而不是组件属性。
在一个组件的定义和使用时，组件的属性名和data字段相互间都不能冲突（尽管它们位于不同的定义段中）。
小结：
Component构造器属性、方法
相关代码片段：
third-component.wxml
{}
{}
{}
{}
third-component.js
Component({
behaviors: [],
properties:{
myProperty: {
//属性名
type: String,// 类型（必填），目前接受的类型包括：String，Number，Boolean，Object，Array，null（表示任意类型）
value:'',// 属性初始值（可选），如果未指定则会根据类型选择一个
observer:function(newVal, oldVal){
console.log("newVal=",newVal,"oldVal=",oldVal)
}// 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串，如：'_propertyChange'
},
love:{
type: String,
value:'before love click',
observer:function(newVal, oldVal){
console.log("newVal=", newVal,"oldVal=", oldVal)
}
},
love2:{
type: String,
value:'before love2 click',
observer:function(newVal, oldVal) {
console.log("newVal=", newVal,"oldVal=", oldVal)
}
},
myProperty2: String//简化的定义方式
},
data: {
A:[{
B:'Zhou Fangyuan loves me.'
}]
},// 私有数据，可用于模板渲染
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached:function(){
console.log("attached")
},
moved:function(){},
detached:function(){},
methods:{
onMyButtonTap:function(){
console.log("onMyButtonTap")
this.setData({
// 更新属性和数据的方法与更新页面数据的方法类似
myProperty:'She loves me, too!',
love:'after love click'
})
},
_myPrivateMethod:function(){
// 内部方法建议以下划线开头
this.replaceDataOnPath(['A',,'B'],'I love her, too!')// 这里将data.A[0].B设置为’myPrivateData‘
this.setData({
love2:'after love2 click'
})
this.applyDataUpdates()
},
_propertyChange:function(newVal,oldVal) {
//
}
}
})
index.wxml
效果图：
点击两个button之后：
谢谢！
- 发表于:
- 原文链接：https://kuaibao.qq.com/s/20180610G0VPO300?refer=cp_1026
- 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号（企鹅号）传播渠道之一，根据《腾讯内容开放平台服务协议》转载发布内容。
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
