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 否 元件生命週期函式，在元件例項被從頁面節點樹移除時執行
options Object 否 其他選項
生成的元件例項可以在元件的方法、生命週期函式和屬性 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 觸發事件
程式碼示例

Component({
behaviors: [],

properties: {
myProperty: {
// 型別（必填），目前接受的型別包括：String, Number, Boolean, Object, Array, null（表示任意型別）
type: String,

  // 屬性初始值（可選），如果未指定則會根據型別選擇一個
  value: '',

  // 屬性被改變時執行的函式（可選），也可以寫成在 methods 段中定義的方法名字串, 如：'_propertyChange'
  observer: function(newVal, oldVal, changedPath) {
     // 通常 newVal 就是新設定的資料， oldVal 是舊資料
  }
},
myPropertyB: String // 簡化的定義方式
 

},

// 私有資料，可用於模版渲染
data: {},

// 生命週期函式，可以為函式，或一個在 methods 段中定義的方法名
attached: function () { },
ready: function() { },

// 元件自定義方法
methods: {
onMyButtonTap: function(){
this.setData({ … })
},

_myPrivateMethod: function(){
  // 這裡將 data.A[0].B 設為 'test'
  this.setData({
    'A[0].B': 'test'
  })
},

_propertyChange: function(newVal, oldVal) {

}

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

程式碼示例

{
“usingComponents”: {}
}
在元件程式碼中

Component({
properties: {
paramA: Number,
paramB: String,
},

methods: {
onLoad() {
this.data.paramA // 頁面引數 paramA 的值
this.data.paramB // 頁面引數 paramB 的值
}
}
})
注意：此功能正在逐步支援中，可能會存在不符合預期的問題