定义段 | 类型 | 是否必填 | 描述 |
properties | Object Map | 否 | 组件的对外属性,是属性名到属性设置的映射表 |
data | Object | 否 | 组件的内部数据,和 properties 一同用于组件的模板渲染 |
observers | Object | 否 | |
methods | Object | 否 | |
behaviors | String Array | 否 | |
created | Function | 否 | 组件生命周期函数-在组件实例刚刚被创建时执行,注意此时不能调用 setData |
attached | Function | 否 | 组件生命周期函数-在组件实例进入页面节点树时执行 |
ready | Function | 否 | 组件生命周期函数-在组件布局完成后执行 |
detached | Function | 否 | 组件生命周期函数-在组件实例被从页面节点树移除时执行 |
relations | Object | 否 | |
externalClasses | String Array | 否 | |
options | Object Map | 否 | 一些选项(文档中介绍相关特性时会涉及具体的选项设置,这里暂不列举) |
lifetimes | Object | 否 | |
pageLifetimes | Object | 否 |
observer
中通过 this
访问。组件包含一些通用属性和方法。属性名 | 类型 | 描述 |
is | String | 组件的文件路径 |
id | String | 节点 id |
dataset | String | 节点 dataset |
data | Object | 组件数据,包括内部数据和属性值 |
properties | Object | 组件数据,包括内部数据和属性值(与 data 一致) |
方法名 | 参数 | 描述 |
setData | Object newData | 设置 data 并执行视图层渲染 |
triggerEvent | String name , Object detail , Object options | |
createSelectorQuery | - | |
createIntersectionObserver | - | |
selectComponent | String selector | 使用选择器选择组件实例节点,返回匹配到的第一个组件实例对象(会被
wx://component-export 影响) |
selectAllComponents | String selector | 使用选择器选择组件实例节点,返回匹配到的全部组件实例对象组成的数组(会被 wx://component-export 影响) |
selectownerComponent | String selector | 使用选择器选择组件实例节点,返回匹配到的全部组件实例对象组成的数组(会被 wx://component-export 影响) |
getRelationNodes | String relationKey | |
hasBehavior | Object behavior | 检查组件是否具有 behavior (检查时会递归检查被直接或间接引入的所有behavior) |
Component({behaviors: [],// 属性定义(详情参见下文)properties: {myProperty: { // 属性名type: String,value: ''},myProperty2: String // 简化的定义方式},data: {}, // 私有数据,可用于模板渲染lifetimes: {// 生命周期函数,可以为函数,或一个在methods段中定义的方法名attached: function () { },detached: function () { },},// 生命周期函数,可以为函数,或一个在methods段中定义的方法名attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖ready: function() { },pageLifetimes: {// 组件所在页面的生命周期函数show: function () { },hide: function () { },},methods: {onMyButtonTap: function(){this.setData({// 更新属性和数据的方法与更新页面数据的方法类似})},// 内部方法建议以下划线开头_myPrivateMethod: function(){// 这里将 data.A[0].B 设为 'myPrivateData'this.setData({'A[0].B': 'myPrivateData'})},_propertyChange: function(newVal, oldVal) {}}})
定义段 | 类型 | 是否必填 | 描述 |
type | - | 是 | 属性的类型 |
value | - | 否 | 属性的初始值 |
observer | Function | 否 | 属性值变化时的回调函数 |
observers
字段代替,它更加强大且性能更好。type
字段为 必填 项。Component({properties: {min: {type: Number,value: 0},max: {type: Number,value: 0,observer: function(newVal, oldVal) {// 属性值变化时执行}},lastLeaf: {// 这个属性可以是 Number 、 String 、 Boolean 三种类型中的一种type: Number,optionalTypes: [String, Object],value: 0}}})
String
Number
Boolean
Object
Array
其一,也可以为 null
表示不限制类型。<custom-comp min="1" max="5" />
Number
类型, min
和 max
会被赋值为 1
和 5
,而非 "1"
和 "5"
,即:this.data.min === 1 // truethis.data.max === 5 // true
this.data
可以获取内部数据和属性值;但直接修改它不会将变更应用到界面上,应使用 setData
修改;this
访问到;data
开头,即不要命名成 dataXyz
这样的形式,因为在 WXML 中, data-xyz=""
会被作为节点 dataset
来处理,而不是组件属性;data
字段相互间都不能冲突(尽管它们位于不同的定义段中)。behavior
,接受一个 Object
类型的参数。定义段 | 类型 | 是否必填 | 描述 |
properties | Object Map | 否 | 同组件的属性 |
data | Object | 否 | 同组件的数据 |
methods | Object | 否 | 同自定义组件的方法 |
behaviors | String Array | 否 | |
created | Function | 否 | 组件生命周期函数-在组件实例刚刚被创建时执行,注意此时不能调用 setData |
attached | Function | 否 | 组件生命周期函数-在组件实例进入页面节点树时执行 |
ready | Function | 否 | 组件生命周期函数-在组件布局完成后执行 |
detached | Function | 否 | 组件生命周期函数-在组件实例被从页面节点树移除时执行 |
relations | Object | 否 | |
lifetimes | Object | 否 | |
pageLifetimes | Object | 否 |
// my-behavior.jsmodule.exports = Behavior({behaviors: [],properties: {myBehaviorProperty: {type: String}},data: {myBehaviorData: {}},attached: function(){},methods: {myBehaviorMethod: function(){}}})
本页内容是否解决了您的问题?