# 自定義組件 從小程序基礎庫版本 [1.6.3](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) 開始，小程序支持簡潔的組件化編程。 開發者可以將頁面內的功能模塊抽象成自定義組件，以便在不同的頁面中重復使用；也可以將復雜的頁面拆分成多個低耦合的模塊，有助于代碼維護。自定義組件在使用時與基礎組件非常相似。 ### 創建自定義組件 類似于頁面，一個自定義組件由 `json` `wxml` `wxss` `js` 4個文件組成。要編寫一個自定義組件，首先需要在 `json` 文件中進行自定義組件聲明（將 `component` 字段設為 `true` 可這一組文件設為自定義組件）： ``` { "component": true } ``` 同時，還要在 `wxml` 文件中編寫組件模版，在 `wxss` 文件中加入組件樣式，它們的寫法與頁面的寫法類似。具體細節和注意事項參見 [組件模版和樣式](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/custom-component/wxml-wxss.html) 。 **代碼示例：** ``` <!-- 這是自定義組件的內部WXML結構 --> <view class="inner"> {{innerText}} </view> <slot></slot> ``` ``` /* 這里的樣式只應用于這個自定義組件 */ .inner { color: red; } ``` **注意：在組件wxss中不應使用ID選擇器、屬性選擇器和標簽名選擇器。** 在自定義組件的 `js` 文件中，需要使用 `Component()` 來注冊組件，并提供組件的屬性定義、內部數據和自定義方法。 組件的屬性值和內部數據將被用于組件 `wxml` 的渲染，其中，屬性值是可由組件外部傳入的。更多細節參見 [Component構造器](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/custom-component/component.html) 。 **代碼示例：** ``` Component({ properties: { // 這里定義了innerText屬性，屬性值可以在組件使用時指定 innerText: { type: String, value: 'default value', } }, data: { // 這里是一些組件內部數據 someData: {} }, methods: { // 這里是一個自定義方法 customMethod: function(){} } }) ``` ### 使用自定義組件 使用已注冊的自定義組件前，首先要在頁面的 `json` 文件中進行引用聲明。此時需要提供每個自定義組件的標簽名和對應的自定義組件文件路徑： ``` { "usingComponents": { "component-tag-name": "path/to/the/custom/component" } } ``` 這樣，在頁面的 `wxml` 中就可以像使用基礎組件一樣使用自定義組件。節點名即自定義組件的標簽名，節點屬性即傳遞給組件的屬性值。 **代碼示例：** ``` <view> <!-- 以下是對一個自定義組件的引用 --> <component-tag-name inner-text="Some text"></component-tag-name> </view> ``` 自定義組件的 `wxml` 節點結構在與數據結合之后，將被插入到引用位置內。 **Tips**: - 對于基礎庫的1.5.x版本， [1.5.7](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) 也有部分自定義組件支持。 - 因為WXML節點標簽名只能是小寫字母、中劃線和下劃線的組合，所以自定義組件的標簽名也只能包含這些字符。 - 自定義組件也是可以引用自定義組件的，引用方法類似于頁面引用自定義組件的方式（使用 `usingComponents` 字段）。 - 自定義組件和使用自定義組件的頁面所在項目根目錄名不能以“wx-”為前綴，否則會報錯。 - 舊版本的基礎庫不支持自定義組件，此時，引用自定義組件的節點會變為默認的空節點。