自定義組件

開發(fā)者可以將頁(yè)面內(nèi)的功能模塊抽象成自定義組件，以便在不同的頁(yè)面中重復(fù)使用；也可以將復(fù)雜的頁(yè)面拆分成多個(gè)低耦合的模塊，有助于代碼維護(hù)。自定義組件在使用時(shí)與基礎(chǔ)組件非常相似。

創(chuàng)建自定義組件

類似于頁(yè)面，一個(gè)自定義組件由 json、 ttml/wxml、ttss/wxss、js 4 個(gè)文件組成。要編寫一個(gè)自定義組件，首先需要在 json 文件中進(jìn)行自定義組件聲明（將 component 字段設(shè)為 true 可這一組文件設(shè)為自定義組件）：

{
  "component": true
}

同時(shí)，還要在 ttml/wxml 文件中編寫組件模版，在 ttss/wxss 文件中加入組件樣式，它們的寫法與頁(yè)面的寫法類似。具體細(xì)節(jié)和注意事項(xiàng)參見組件模版和樣式 。

代碼示例 (自定義組件的內(nèi)部 TTML 結(jié)構(gòu))

<view class="my-custom-component">
  <text class="header">{{ headerText }}</text>
  <view class="content">
    <slot></slot>
  </view>
</view>

下列樣式只應(yīng)用于這個(gè)自定義組件

.header {
  color: green;
}

在自定義組件的 js 文件中，需要使用 Component() 來(lái)注冊(cè)組件，并提供組件的屬性定義、內(nèi)部數(shù)據(jù)和自定義方法。

組件的屬性值和內(nèi)部數(shù)據(jù)將被用于組件 ttml/wxml 的渲染，其中，屬性值是可由組件外部傳入的。更多細(xì)節(jié)參見 Component 構(gòu)造器 。

Component({
  properties: {
    // 這里定義了 headerText 屬性，屬性值可以在組件使用時(shí)指定
    headerText: {
      type: String,
      value: "默認(rèn)標(biāo)題文案"
    }
  },
  data: {
    // 組件內(nèi)部數(shù)據(jù)
    defaultStates: {}
  },
  methods: {
    // 自定義方法
    customMethod: function() {}
  }
});

使用自定義組件

使用已注冊(cè)的自定義組件前，首先要在頁(yè)面的 json 文件中進(jìn)行引用聲明。此時(shí)需要提供每個(gè)自定義組件的標(biāo)簽名和對(duì)應(yīng)的自定義組件文件路徑：

{
  "usingComponents": {
    "my-component": "path/to/a/custom/component"
  }
}

這樣，在頁(yè)面的 ttml 中就可以像使用基礎(chǔ)組件一樣使用自定義組件。節(jié)點(diǎn)名即自定義組件的標(biāo)簽名，節(jié)點(diǎn)屬性即傳遞給組件的屬性值。

<view class="component-wrapper">
  <my-component header-text="My Title"></my-component>
</view>

自定義組件的 ttml/wxml 節(jié)點(diǎn)結(jié)構(gòu)在與數(shù)據(jù)結(jié)合之后，將被插入到引用位置內(nèi)。

使用提示:

• 因?yàn)?nbsp;ttml/wxml 節(jié)點(diǎn)標(biāo)簽名只能是小寫字母、中劃線和下劃線的組合，所以自定義組件的標(biāo)簽名也只能包含這些字符。
• 自定義組件也是可以引用自定義組件的，引用方法類似于頁(yè)面引用自定義組件的方式（使用 usingComponents 字段）。