Component 构造器

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

定义参数

选项名类型是否必填说明最低版本
propertiesObject否组件的对外属性，是属性名到属性设置的映射表，属性设置中可包含三个字段，type 表示属性类型、value 表示属性初始值、observer 表示属性值被更改时的响应函数
dataObject否组件的内部数据，和 properties 一同用于组件的模版渲染
methodsObject否组件的方法，包括事件响应函数和任意的自定义方法，关于事件响应函数的使用，参见组件事件
behaviorsString/Array否类似于 mixins
createdFunction否组件生命周期函数，在组件实例进入页面节点树时执行，注意此时不能调用setData
attachedFunction否组件生命周期函数，在组件实例进入页面节点树时执行
readyFunction否组件生命周期函数，在组件布局完成后执行
movedFunction否组件生命周期函数，在组件实例被移动到节点树另一个位置时执行
detachedFunction否组件生命周期函数，在组件实例被从页面节点树移除时执行
relationsObject否组件间的关系定义，参加组件间关系1.12.0.0
optionsObject否其他选项
lifetimesObject否组件生命周期声明对象，优先级比同级的 attached、detached 等生命周期优先级高
definitionFilterFunction否定义过滤器，用于自定义组件扩展，参见自定义组件扩展

生成的组件实例可以在组件的方法、生命周期函数和属性 observer 中通过 this 访问。组件包含一些通用属性和方法。

通用属性列表

属性名类型说明
isString组件的文件路径
idString节点 id
datasetString节点 dataset
dataObject组件数据
propertiesObject组件数据

方法列表

方法名参数及其类型说明最低版本
setDataObject data设置 data
hasBehaviorObject behavior检查组件是否具有 behavior
triggerEventString eventName, Object detail, Object options触发事件
selectComponentString selector, Function callback使用选择器选择组件实例节点，返回匹配到的第一个组件实例对象，此方法为异步方法，返回值会在请求完成后传入callback
selectAllComponentsString selector, Function callback使用选择器选择组件实例节点，返回匹配到的全部组件实例对象组成的数组，此方法为异步方法，返回值会在请求完成后传入callback
getRelationNodesString relationKey , Function callback获取这个关系所对应的所有关联节点，参见 组件间关系。 此方法为异步方法，返回值会在请求完成后传入callback1.12.0.0

代码示例

  1. Component({
  2.   behaviors: [],
  4.   properties: {
  5.     myProperty: {
  6.       // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
  7.       type: String,
  9.       // 属性初始值（可选），如果未指定则会根据类型选择一个
  10.       value: '',
  12.       // 属性被改变时执行的函数（可选），也可以写成在 methods 段中定义的方法名字符串, 如：'_propertyChange'
  13.       observer: function(newVal, oldVal, changedPath) {
  14.          // 通常 newVal 就是新设置的数据， oldVal 是旧数据
  15.       }
  16.     },
  17.     myPropertyB: String // 简化的定义方式
  18.   },
  20.   // 私有数据，可用于模版渲染
  21.   data: {},
  23.   // 生命周期函数，可以为函数，或一个在 methods 段中定义的方法名
  24.   attached: function () { 
  25.     this.selectComponent('.class-name', function(res) {
  26.       console.log(res)
  27.     })
  28.   },
  29.   ready: function() { },
  31.   // 组件自定义方法
  32.   methods: {
  33.     onMyButtonTap: function(){
  34.       this.setData({ ... })
  35.     },
  37.     _myPrivateMethod: function(){
  38.       // 这里将 data.A[0].B 设为 'test'
  39.       this.setData({
  40.         'A[0].B': 'test'
  41.       })
  42.     },
  44.     _propertyChange: function(newVal, oldVal) {
  46.     }
  47.   }
  48. })

注意：在 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 。

代码示例

  1. {
  2.   "usingComponents": {}
  3. }

在组件代码中

  1. Component({
  2.   properties: {
  3.     paramA: Number,
  4.     paramB: String,
  5.   },
  7.   methods: {
  8.     onLoad() {
  9.       this.data.paramA // 页面参数 paramA 的值
  10.       this.data.paramB // 页面参数 paramB 的值
  11.     }
  12.   }
  13. })

注意：此功能正在逐步支持中，可能会存在不符合预期的问题

原文: https://developer.toutiao.com/docs/framework/custom_component_constructor.html