# 自定義組件

從小程序基礎(chǔ)庫(kù)版本 1.6.3 開(kāi)始，小程序支持簡(jiǎn)潔的組件化編程。所有自定義組件相關(guān)特性都需要基礎(chǔ)庫(kù)版本 1.6.3 或更高。

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

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

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

{
  "component": true
}

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

代碼示例：

<!-- 這是自定義組件的內(nèi)部WXML結(jié)構(gòu) -->
<view class="inner">
  {{innerText}}
</view>
<slot></slot>

/* 這里的樣式只應(yīng)用于這個(gè)自定義組件 */
.inner {
  color: red;
}

注意：在組件wxss中不應(yīng)使用ID選擇器、屬性選擇器和標(biāo)簽名選擇器。

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

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

代碼示例：

Component({
  properties: {
    // 這里定義了innerText屬性，屬性值可以在組件使用時(shí)指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 這里是一些組件內(nèi)部數(shù)據(jù)
    someData: {}
  },
  methods: {
    // 這里是一個(gè)自定義方法
    customMethod: function(){}
  }
})

# 使用自定義組件

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

{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}

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

開(kāi)發(fā)者工具 1.02.1810190 及以上版本支持在 app.json 中聲明 usingComponents 字段，在此處聲明的自定義組件視為全局自定義組件，在小程序內(nèi)的頁(yè)面或自定義組件中可以直接使用而無(wú)需再聲明。

代碼示例：

在開(kāi)發(fā)者工具中預(yù)覽效果

<view>
  <!-- 以下是對(duì)一個(gè)自定義組件的引用 -->
  <component-tag-name inner-text="Some text"></component-tag-name>
</view>

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

# 注意事項(xiàng)

一些需要注意的細(xì)節(jié)：

• 因?yàn)?WXML 節(jié)點(diǎn)標(biāo)簽名只能是小寫(xiě)字母、中劃線(xiàn)和下劃線(xiàn)的組合，所以自定義組件的標(biāo)簽名也只能包含這些字符。
• 自定義組件也是可以引用自定義組件的，引用方法類(lèi)似于頁(yè)面引用自定義組件的方式（使用 usingComponents 字段）。
• 自定義組件和頁(yè)面所在項(xiàng)目根目錄名不能以“wx-”為前綴，否則會(huì)報(bào)錯(cuò)。

注意，是否在頁(yè)面文件中使用 usingComponents 會(huì)使得頁(yè)面的 this 對(duì)象的原型稍有差異，包括：

• 使用 usingComponents 頁(yè)面的原型與不使用時(shí)不一致，即 Object.getPrototypeOf(this) 結(jié)果不同。
• 使用 usingComponents 時(shí)會(huì)多一些方法，如 selectComponent 。
• 出于性能考慮，使用 usingComponents 時(shí)， setData 內(nèi)容不會(huì)被直接深復(fù)制，即 this.setData({ field: obj }) 后 this.data.field === obj 。（深復(fù)制會(huì)在這個(gè)值被組件間傳遞時(shí)發(fā)生。）

如果頁(yè)面比較復(fù)雜，新增或刪除 usingComponents 定義段時(shí)建議重新測(cè)試一下。