【小程序】component使用

component使用

組件模板

組件模板的寫法與頁面模板相同。組件模板與組件數據結合後生成的節點樹，將被插入到組件的引用位置上。 在組件模板中能夠提供一個 <slot> 節點，用於承載組件引用時提供的子節點。 注意，在模板中引用到的自定義組件及其對應的節點名須要在 json 文件中顯式定義，不然會被看成一個無心義的節點。

<!-- 組件模板 --> <view class="wrapper"> <view>這裏是組件的內部節點</view> <slot></slot> </view> 

<!-- 引用組件的頁面模板 --> <view> <component-tag-name prop-a="{{dataFieldA}}" prop-b="{{dataFieldB}}"> <!-- 這部份內容將被放置在組件 <slot> 的位置上 --> <view>這裏是插入到組件slot中的內容</view> </component-tag-name> </view> 

組件的屬性 propA 和 propB 將收到頁面傳遞的數據。頁面能夠經過 setData 來改變綁定的數據字段。

默認狀況下，一個組件的wxml中只能有一個slot。須要使用多slot時，能夠在組件js中聲明啓用。

Component({
  options: { multipleSlots: true // 在組件定義時的選項中啓用多slot支持 }, properties: { /* ... */ }, methods: { /* ... */ } }) 

此時，能夠在這個組件的wxml中使用多個slot，以不一樣的 name 來區分。

<!-- 組件模板 --> <view class="wrapper"> <slot name="before"></slot> <view>這裏是組件的內部細節</view> <slot name="after"></slot> </view> 

使用時，用 slot 屬性來將節點插入到不一樣的slot上。

<!-- 引用組件的頁面模板 --> <view> <component-tag-name> <!-- 這部份內容將被放置在組件 <slot name="before"> 的位置上 --> <view slot="before">這裏是插入到組件slot name="before"中的內容</view> <!-- 這部份內容將被放置在組件 <slot name="after"> 的位置上 --> <view slot="after">這裏是插入到組件slot name="after"中的內容</view> </component-tag-name> </view> 

構造器

Component構造器可用於定義組件，調用Component構造器時能夠指定組件的屬性、數據、方法等。 小程序中並無父子組件的關係譜，組件的數據不會區分props和state，所有是統一的data，而且所有是動態的。任何data的修改都會觸發Rerender。

定義段	類型	是否必填	描述	最低版本
properties	Object Map	否	組件的對外屬性，是屬性名到屬性設置的映射表，屬性設置中可包含三個字段， type 表示屬性類型、 value 表示屬性初始值、 observer 表示屬性值被更改時的響應函數
data	Object	否	組件的內部數據，和 properties 一同用於組件的模板渲染
methods	Object	否	組件的方法，包括事件響應函數和任意的自定義方法，關於事件響應函數的使用，參見 組件事件
behaviors	String Array	否	相似於mixins和traits的組件間代碼複用機制，參見 behaviors
created	Function	否	組件生命週期函數，在組件實例剛剛被建立時執行，注意此時不能調用 setData ，參見 組件生命週期
attached	Function	否	組件生命週期函數，在組件實例進入頁面節點樹時執行，參見 組件生命週期
ready	Function	否	組件生命週期函數，在組件佈局完成後執行，參見 組件生命週期
moved	Function	否	組件生命週期函數，在組件實例被移動到節點樹另外一個位置時執行，參見 組件生命週期
detached	Function	否	組件生命週期函數，在組件實例被從頁面節點樹移除時執行，參見 組件生命週期
relations	Object	否	組件間關係定義，參見 組件間關係
externalClasses	String Array	否	組件接受的外部樣式類，參見 外部樣式類
options	Object Map	否	一些選項（文檔中介紹相關特性時會涉及具體的選項設置，這裏暫不列舉）
lifetimes	Object	否	組件生命週期聲明對象，參見 組件生命週期	2.2.3
pageLifetimes	Object	否	組件所在頁面的生命週期聲明對象，支持頁面的 show 、 hide 等生命週期，參見 組件生命週期	2.2.3
definitionFilter	Function	否	定義段過濾器，用於自定義組件擴展，參見 自定義組件擴展

Component({

  behaviors: [], properties: { myProperty: { // 屬性名 type: String, // 類型（必填），目前接受的類型包括：String, Number, Boolean, Object, Array, null（表示任意類型） value: '', // 屬性初始值（可選），若是未指定則會根據類型選擇一個 observer(newVal, oldVal, changedPath) { // 屬性被改變時執行的函數（可選），也能夠寫成在methods段中定義的方法名字符串, 如：'_propertyChange' // 一般 newVal 就是新設置的數據， oldVal 是舊數據 } }, myProperty2: String // 簡化的定義方式 }, data: {}, // 私有數據，可用於模板渲染 lifetimes: { // 生命週期函數，能夠爲函數，或一個在methods段中定義的方法名 attached() { }, moved() { }, detached() { }, }, // 生命週期函數，能夠爲函數，或一個在methods段中定義的方法名 attached() { }, // 此處attached的聲明會被lifetimes字段中的聲明覆蓋 ready() { }, pageLifetimes: { // 組件所在頁面的生命週期函數 show() { }, hide() { }, resize() { }, }, methods: { onMyButtonTap() { this.setData({ // 更新屬性和數據的方法與更新頁面數據的方法相似 }) }, // 內部方法建議如下劃線開頭 _myPrivateMethod() { // 這裏將 data.A[0].B 設爲 'myPrivateData' this.setData({ 'A[0].B': 'myPrivateData' }) }, _propertyChange(newVal, oldVal) { } } }) 

使用 Component 構造器構造頁面

事實上，小程序的頁面也能夠視爲自定義組件。於是，頁面也可使用 Component 構造器構造，擁有與普通組件同樣的定義段與實例方法。但此時要求對應 json 文件中包含 usingComponents 定義段。

此時，組件的屬性能夠用於接收頁面的參數，如訪問頁面 /pages/index/index?paramA=123&paramB=xyz ，若是聲明有屬性 paramA 或 paramB ，則它們會被賦值爲 123 或 xyz 。

頁面的生命週期方法（即 on 開頭的方法），應寫在 methods 定義段中。

{
  "usingComponents": {} } 

Component({

  properties: { paramA: Number, paramB: String, }, methods: { onLoad() { this.data.paramA // 頁面參數 paramA 的值 this.data.paramB // 頁面參數 paramB 的值 } } }) 

觸發事件

自定義組件觸發事件時，須要使用 triggerEvent 方法，指定事件名、detail對象和事件選項：

<!-- 在自定義組件中 --> <button bindtap="onTap">點擊這個按鈕將觸發「myevent」事件</button> 

Component({
  properties: {}, methods: { onTap() { const myEventDetail = {} // detail對象，提供給事件監聽函數 const myEventOption = {} // 觸發事件的選項 this.triggerEvent('myevent', myEventDetail, myEventOption) } } }) 

觸發事件的選項包括：

選項名	類型	是否必填	默認值	描述
bubbles	Boolean	否	false	事件是否冒泡
composed	Boolean	否	false	事件是否能夠穿越組件邊界，爲false時，事件將只能在引用組件的節點樹上觸發，不進入其餘任何組件內部
capturePhase	Boolean	否	false	事件是否擁有捕獲階段

監聽事件

事件系統是組件間通訊的主要方式之一。自定義組件能夠觸發任意的事件，引用組件的頁面能夠監聽這些事件。 監聽自定義組件事件的方法與監聽基礎組件事件的方法徹底一致：

<!-- 當自定義組件觸發「myevent」事件時，調用「onMyEvent」方法 --> <component-tag-name bindmyevent="onMyEvent" /> <!-- 或者能夠寫成 --> <component-tag-name bind:myevent="onMyEvent" /> 

Page({
  onMyEvent(e) {
    e.detail // 自定義組件觸發事件時提供的detail對象 } }) 

behavior使用

behaviors 是用於組件間代碼共享的特性，相似於一些編程語言中的「mixins」或「traits」。

每一個 behavior 能夠包含一組屬性、數據、生命週期函數和方法，組件引用它時，它的屬性、數據和方法會被合併到組件中，生命週期函數也會在對應時機被調用。每一個組件能夠引用多個 behavior 。 behavior 也能夠引用其餘 behavior 。

behavior 須要使用 Behavior() 構造器定義。

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

// my-component.js const myBehavior = require('my-behavior') Component({ behaviors: [myBehavior], properties: { myProperty: { type: String } }, data: { myData: {} }, attached() {}, methods: { myMethod() {} } }) 

在上例中， my-component 組件定義中加入了 my-behavior ，而 my-behavior 中包含有 myBehaviorProperty 屬性、 myBehaviorData 數據字段、 myBehaviorMethod 方法和一個 attached 生命週期函數。這將使得 my-component 中最終包含 myBehaviorProperty 、 myProperty 兩個屬性， myBehaviorData 、 myData 兩個數據字段，和 myBehaviorMethod 、 myMethod 兩個方法。當組件觸發 attached 生命週期時，會依次觸發 my-behavior 中的 attached 生命週期函數和 my-component 中的 attached 生命週期函數。

 

組件和它引用的 behavior 中能夠包含同名的字段，對這些字段的處理方法以下：

• 若是有同名的屬性或方法，組件自己的屬性或方法會覆蓋 behavior 中的屬性或方法，若是引用了多個 behavior ，在定義段中靠後 behavior 中的屬性或方法- 會覆蓋靠前的屬性或方法；
• 若是有同名的數據字段，若是數據是對象類型，會進行對象合併，若是是非對象類型則會進行相互覆蓋；
• 生命週期函數不會相互覆蓋，而是在對應觸發時機被逐個調用。若是同一個 behavior 被一個組件屢次引用，它定義的生命週期函數只會被執行一次。

 

----------------------------------------

小程序系列：

  前言

  項目結構

  生命週期

  請求與封裝

  數據綁定

  事件

  基礎使用： component使用 、 wxs使用 、 節點操做 、 頁面跳轉 、 緩存

  前端架構淺談

----------------------------------------