微信小程序Component構(gòu)造器怎么用

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

　
　Component構(gòu)造器可用于定義組件，調(diào)用Component構(gòu)造器時(shí)可以指定組件的屬性、數(shù)據(jù)、方法等。

　　定義段      類型         是否必填         描述

　　properties  Object Map     否              組件的對(duì)外屬性，是屬性名到屬性設(shè)置的映射表，屬性設(shè)置中可包含三個(gè)字段， type 表示屬性類型、 value 表示屬性初始值、 observer 表示屬性值被更改時(shí)的響應(yīng)函數(shù)

　　data        Object         否              組件的內(nèi)部數(shù)據(jù)，和 properties 一同用于組件的模版渲染

　　methods     Object         否             組件的方法，包括事件響應(yīng)函數(shù)和任意的自定義方法，關(guān)于事件響應(yīng)函數(shù)的使用，參見 組件事件

　　behaviors   String Array  否              類似于mixins和traits的組件間代碼復(fù)用機(jī)制，參見 behaviors

　　created    Function       否              組件生命周期函數(shù)，在組件實(shí)例進(jìn)入頁(yè)面節(jié)點(diǎn)樹時(shí)執(zhí)行，注意此時(shí)不能調(diào)用 setData

　　attached   Function       否              組件生命周期函數(shù)，在組件實(shí)例進(jìn)入頁(yè)面節(jié)點(diǎn)樹時(shí)執(zhí)行

　　ready      Function       否              組件生命周期函數(shù)，在組件布局完成后執(zhí)行，此時(shí)可以獲取節(jié)點(diǎn)信息(使用 SelectorQuery )

　　moved      Function       否              組件生命周期函數(shù)，在組件實(shí)例被移動(dòng)到節(jié)點(diǎn)樹另一個(gè)位置時(shí)執(zhí)行

　　detached   Function       否              組件生命周期函數(shù)，在組件實(shí)例被從頁(yè)面節(jié)點(diǎn)樹移除時(shí)執(zhí)行

　　relations  Object         否              組件間關(guān)系定義，參見 組件間關(guān)系

　　options    Object Map    否              一些組件選項(xiàng)，請(qǐng)參見文檔其他部分的說明

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

　　屬性名     類型       描述

　　is       String       組件的文件路徑

　　id       String       節(jié)點(diǎn)id

　　dataset  String       節(jié)點(diǎn)dataset

　　data     Object      組件數(shù)據(jù)，包括內(nèi)部數(shù)據(jù)和屬性值

　　方法名        參數(shù)                 描述

　　setData       Object newData        設(shè)置data并執(zhí)行視圖層渲染

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

　　triggerEvent  String name,

                  Object detail,

                  Object options       觸發(fā)事件，參見 組件事件

　　create        SelectorQuery        創(chuàng)建一個(gè) SelectorQuery 對(duì)象，選擇器選取范圍為這個(gè)組件實(shí)例內(nèi)

　　selectComponent String selector     使用選擇器選擇組件實(shí)例節(jié)點(diǎn)，返回匹配到的第一個(gè)組件實(shí)例對(duì)象

　　selectAllComponents  String selector使用選擇器選擇組件實(shí)例節(jié)點(diǎn)，返回匹配到的全部組件實(shí)例對(duì)象組成的數(shù)組

　　getRelationNodesString relationKey   獲取所有這個(gè)關(guān)系對(duì)應(yīng)的所有關(guān)聯(lián)節(jié)點(diǎn)，參見 組件間關(guān)系

　　代碼示例：

　　Component({

　　behaviors: [],

　　properties: {

　　myProperty: { // 屬性名

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

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

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

　　},

　　myProperty2: String // 簡(jiǎn)化的定義方式

　　},

　　data: {}, // 私有數(shù)據(jù)，可用于模版渲染

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

　　attached: function(){},

　　moved: function(){},

　　detached: function(){},

　　methods: {

　　onMyButtonTap: function(){

　　this.setData({

　　// 更新屬性和數(shù)據(jù)的方法與更新頁(yè)面數(shù)據(jù)的方法類似

　　})

　　},

　　_myPrivateMethod: function(){

　　// 內(nèi)部方法建議以下劃線開頭

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

　　this.applyDataUpdates()

　　}

　　}

　　})

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

　　Tips:

　　Component 構(gòu)造器構(gòu)造的組件也可以作為頁(yè)面使用。

　　使用 this.data 可以獲取內(nèi)部數(shù)據(jù)和屬性值，但不要直接修改它們，應(yīng)使用 setData 修改。

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

　　屬性名不要命名成 dataXyz 這樣的形式，因?yàn)樵?WXML 中， data-xyz="" 會(huì)被作為節(jié)點(diǎn) dataset 來處理，而不是組件屬性。

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

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