微信小程序Component構造器怎么用

小編給大家分享一下微信小程序Component構造器怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

　
　Component構造器可用于定義組件，調用Component構造器時可以指定組件的屬性、數據、方法等。

　　定義段      類型         是否必填         描述

　　properties  Object Map     否              組件的對外屬性，是屬性名到屬性設置的映射表，屬性設置中可包含三個字段， type 表示屬性類型、 value 表示屬性初始值、 observer 表示屬性值被更改時的響應函數

　　data        Object         否              組件的內部數據，和 properties 一同用于組件的模版渲染

　　methods     Object         否             組件的方法，包括事件響應函數和任意的自定義方法，關于事件響應函數的使用，參見 組件事件

　　behaviors   String Array  否              類似于mixins和traits的組件間代碼復用機制，參見 behaviors

　　created    Function       否              組件生命周期函數，在組件實例進入頁面節點樹時執行，注意此時不能調用 setData

　　attached   Function       否              組件生命周期函數，在組件實例進入頁面節點樹時執行

　　ready      Function       否              組件生命周期函數，在組件布局完成后執行，此時可以獲取節點信息(使用 SelectorQuery )

　　moved      Function       否              組件生命周期函數，在組件實例被移動到節點樹另一個位置時執行

　　detached   Function       否              組件生命周期函數，在組件實例被從頁面節點樹移除時執行

　　relations  Object         否              組件間關系定義，參見 組件間關系

　　options    Object Map    否              一些組件選項，請參見文檔其他部分的說明

　　生成的組件實例可以在組件的方法、生命周期函數和屬性 observer 中通過 this 訪問。組件包含一些通用屬性和方法。

　　屬性名     類型       描述

　　is       String       組件的文件路徑

　　id       String       節點id

　　dataset  String       節點dataset

　　data     Object      組件數據，包括內部數據和屬性值

　　方法名        參數                 描述

　　setData       Object newData        設置data并執行視圖層渲染

　　hasBehavior   Object behavior       檢查組件是否具有 behavior (檢查時會遞歸檢查被直接或間接引入的所有behavior)

　　triggerEvent  String name,

                  Object detail,

                  Object options       觸發事件，參見 組件事件

　　create        SelectorQuery        創建一個 SelectorQuery 對象，選擇器選取范圍為這個組件實例內

　　selectComponent String selector     使用選擇器選擇組件實例節點，返回匹配到的第一個組件實例對象

　　selectAllComponents  String selector使用選擇器選擇組件實例節點，返回匹配到的全部組件實例對象組成的數組

　　getRelationNodesString relationKey   獲取所有這個關系對應的所有關聯節點，參見 組件間關系

　　代碼示例：

　　Component({

　　behaviors: [],

　　properties: {

　　myProperty: { // 屬性名

　　type: String, // 類型(必填)，目前接受的類型包括：String, Number, Boolean, Object, Array, null(表示任意類型)

　　value: '' // 屬性初始值(可選)，如果未指定則會根據類型選擇一個

　　observer: function(newVal, oldVal){} // 屬性被改變時執行的函數(可選)，也可以寫成在methods段中定義的方法名字符串

　　},

　　myProperty2: String // 簡化的定義方式

　　},

　　data: {}, // 私有數據，可用于模版渲染

　　// 生命周期函數，可以為函數，或一個在methods段中定義的方法名

　　attached: function(){},

　　moved: function(){},

　　detached: function(){},

　　methods: {

　　onMyButtonTap: function(){

　　this.setData({

　　// 更新屬性和數據的方法與更新頁面數據的方法類似

　　})

　　},

　　_myPrivateMethod: function(){

　　// 內部方法建議以下劃線開頭

　　this.replaceDataOnPath(['A', 0, 'B'], 'myPrivateData') // 這里將 data.A[0].B 設為 'myPrivateData'

　　this.applyDataUpdates()

　　}

　　}

　　})

　　注意：在 properties 定義段中，屬性名采用駝峰寫法(propertyName);在 wxml 中，指定屬性值時則對應使用連字符寫法(component-tag-name property-name="attr value")，應用于數據綁定時采用駝峰寫法(attr="{{propertyName}}")。

　　Tips:

　　Component 構造器構造的組件也可以作為頁面使用。

　　使用 this.data 可以獲取內部數據和屬性值，但不要直接修改它們，應使用 setData 修改。

　　生命周期函數無法在組件方法中通過 this 訪問到。

　　屬性名不要命名成 dataXyz 這樣的形式，因為在 WXML 中， data-xyz="" 會被作為節點 dataset 來處理，而不是組件屬性。

　　在一個組件的定義和使用時，組件的屬性名和data字段相互間都不能沖突(盡管它們位于不同的定義段中)。

以上是“微信小程序Component構造器怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！