自定義組件

Component

創建自定義組件，接受一個Object類型的參數。

參數

Object object

定義段	類型	是否必填	描述
properties	Object Map	否	組件的對外内容，是内容名到内容設定的映射錶
data	Object	否	組件的內部數據，和properties一同用於組件的模版渲染
observers	Object	否	組件數據欄位監聽器，用於監聽properties和data的變化，參見 數據監聽器
methods	Object	否	組件的方法，包括事件響應函數和任意的自定義方法，關於事件響應函數的使用，參見 組件間通信與事件
behaviors	String Array	否	類似於mixins和traits的組件間代碼複用機制，參見 behaviors
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	-	創建一個 SelectorQuery 對象，選擇器選取範圍為這個組件實例內
createIntersectionObserver	-	創建一個 IntersectionObserver 對象，選擇器選取範圍為這個組件實例內
selectComponent	String selector	使用選擇器選擇組件實例節點，返回匹配到的第一個組件實例對象（會被wx:// component-export影響）
selectAllComponents	String selector	使用選擇器選擇組件實例節點，返回匹配到的全部組件實例對象組成的數組（會被wx:// component-export影響）
selectownerComponent	String selector	獲取這個關係所對應的所有關聯節點，參見
getRelationNodes	String relationKey	獲取這個關係所對應的所有關聯節點，參見 組件間關係
hasBehavior	hasBehavior	檢查組件是否具有behavior（檢查時會遞迴檢查被直接或間接引入的所有behavior）

示例代碼：

Component({
  behaviors: [],

  // Property definition (see below for details)
  properties: {
    myProperty: {
      // Attribute name
      type: String,
      value: "",
    },
    myProperty2: String, // Simplified definition
  },

  data: {}, // Private data, available for template rendering

  lifetimes: {
    // Life cycle function, can be a function, or a method name defined in the methods section
    attached: function () {},
    moved: function () {},
    detached: function () {},
  },

  // Life cycle function, can be a function, or a method name defined in the methods section
  attached: function () {}, // The attached declaration here is overwritten by the declaration in the lifetimes field
  ready: function () {},

  pageLifetimes: {
    // Life Cycle Function for the Page on which the component is located
    show: function () {},
    hide: function () {},
    resize: function () {},
  },

  methods: {
    onMyButtonTap: function () {
      this.setData({
        // The method of updating properties and data is similar to that of updating page data
      });
    },
    // The internal method recommends starting with an underscore
    _myPrivateMethod: function () {
      // Here will be data.A[0].B Set to 'myPrivateData'
      this.setData({
        "A[0].B": "myPrivateData",
      });
    },
    _propertyChange: function (newVal, oldVal) {},
  },
});

properties

relations定義段	類型	是否必填	描述
type	-	是	内容的類型
value	-	否	内容的初始值
observer	Function	否	屬性值變化時的回呼函數

屬性值的改變情况可以使用observer來監聽。 現時，在新版本基礎庫中不推薦使用這個欄位，而是使用Component構造器的observers欄位代替，它更加强大且效能更好

TIP

定義段中的type欄位為必填項。

示例代碼：

Component({
  properties: {
    min: {
      type: Number,
      value: 0
    },
    min: {
      type: Number,
      value: 0,
      observer: function(newVal, oldVal) {
        // When property values change
      }
    },
    lastLeaf: {
      // This property can be Number 、 String 、 Boolean One of three types.
      type: Number,
      optionalTypes: [String, Object],
      value: 0
    }
  }
})

内容的類型可以為String Number Boolean Object Array其一，也可以為null表示不限制類型。

多數情况下，内容最好指定一個確切的類型。 這樣，在WXML中以字面量指定屬性值時，值可以獲得一個確切的類型，如：

<custom-comp min="1" max="5" />

此時，由於自定義組件的對應内容被規定為Number類型， min和max會被賦值為1和5，而非'1'和'5'，即：

this.data.min === 1 // true
this.data.max === 5 // true

tips

• 使用this.data可以獲取內部數據和屬性值； 但直接修改它不會將變更應用到介面上，應使用setData修改；
• 使用this.data可以獲取內部數據和屬性值； 但直接修改它不會將變更應用到介面上，應使用setData修改；
• 使用this.data可以獲取內部數據和屬性值； 但直接修改它不會將變更應用到介面上，應使用setData修改；
• 使用this.data可以獲取內部數據和屬性值； 但直接修改它不會將變更應用到介面上，應使用setData修改；

Behavior

注册一個behavior，接受一個Object類型的參數。

參數

Object object

定義段	類型	是否必填	描述
properties	Object Map	否	同組件的内容
data	Object	否	同組件的數據
methods	Object	否	同自定義組件的方法
behaviors	String Array	否	類似於mixins和traits的組件間代碼複用機制，參見 behaviors
created	Function	否	組件生命週期函數-在組件實例剛剛被創建時執行，注意此時不能調用setData
attached	Function	否	組件生命週期函數-在組件實例進入頁面節點樹時執行
ready	Function	否	組件生命週期函數-在組件佈局完成後執行
detached	Function	否	組件生命週期函數-在組件實例被從頁面節點樹移除時執行
relations	Object	否	類似於mixins和traits的組件間代碼複用機制，參見 組件間關係
lifetimes	Object	否	組件生命週期聲明對象，參見 組件生命週期
pageLifetimes	Object	否	組件所在頁面的生命週期聲明對象，參見 組件生命週期

代碼示例：

// my-behavior.js
module.exports = Behavior({
  behaviors: [],
  properties: {
    myBehaviorProperty: {
      type: String
    }
  },
  data: {
    myBehaviorData: {}
  },
  attached: function(){},
  methods: {
    myBehaviorMethod: function(){}
  }
})