組件模版和樣式 · 我的開發之路系列

# 組件模版和樣式類似于頁面，自定義組件擁有自己的 `wxml` 模版和 `wxss` 樣式。 ### 組件模版組件模版的寫法與頁面模板相同。組件模版與組件數據結合后生成的節點樹，將被插入到組件的引用位置上。在組件模板中可以提供一個 `<slot>` 節點，用于承載組件引用時提供的子節點。 **代碼示例：** **組件** *components/com/index.wxml* ```html <view class="wrapper"> <view>這里是組件的內部節點</view> <slot></slot> </view> ``` *components/com/index.json* 必須在組件的json配置中加入 `"component": true`，才能識別這是一個組件。 ```json { "component": true } ``` *components/com/index.js* 在 js 中使用 `Component()` 聲明這是一個組件。 ```js Component({}) ``` **引用組件的頁面** *pages/test/index.wxml* ```html <view> <component-tag-name>  <view>這里是插入到組件slot中的內容</view> </component-tag-name> </view> ``` *pages/test/index.json* 在json中引入組件。 ```json { "usingComponents": { "component-tag-name": "/components/com/index" } } ``` *pages/test/index.js* 在 js 中使用 `Page()` 聲明這是一個頁面。 ```js Page({}) ``` ### 組件wxml的slot 在組件的wxml中可以包含 `slot` 節點，用于承載組件使用者提供的wxml結構。默認情況下，一個組件的wxml中只能有一個slot。需要使用多slot時，可以在組件js中聲明啟用。 ```js Component({ options: { multipleSlots: true // 在組件定義時的選項中啟用多slot支持 } }) ``` 此時，可以在這個組件的wxml中使用多個slot，以不同的 `name` 來區分。 **組件模板** ```html <view class="wrapper"> <slot name="before"></slot> <view>這里是組件的內部細節</view> <slot name="after"></slot> </view> ``` 使用時，用 `slot` 屬性來將節點插入到不同的slot上。 **引用組件的頁面** ``` <view> <component-tag-name>  <view slot="before">這里是插入到組件slot name="before"中的內容</view>  <view slot="after">這里是插入到組件slot name="after"中的內容</view> </component-tag-name> </view> ``` ### 組件樣式組件對應 `wxss` 文件的樣式，只對組件wxml內的節點生效。編寫組件樣式時，需要注意以下幾點： - 組件和引用組件的頁面不能使用id選擇器（`#a`）、屬性選擇器（`[a]`）和標簽名選擇器，請改用class選擇器。 - 組件和引用組件的頁面中使用后代選擇器（`.a .b`）在一些極端情況下會有非預期的表現，如遇，請避免使用。 - 子元素選擇器（`.a>.b`）只能用于 `view` 組件與其子節點之間，用于其他組件可能導致非預期的情況。 - 繼承樣式，如 `font` 、 `color` ，會從組件外繼承到組件內。 - 除繼承樣式外， `app.wxss` 中的樣式、組件所在頁面的的樣式對自定義組件無效。 ``` #a { } /* 在組件中不能使用 */ [a] { } /* 在組件中不能使用 */ button { } /* 在組件中不能使用 */ .a > .b { } /* 除非 .a 是 view 組件節點，否則不一定會生效 */ ``` 除此以外，組件可以指定它所在節點的默認樣式，使用 `:host` 選擇器（需要包含基礎庫 [1.7.2](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) 或更高版本的開發者工具支持）。 **代碼示例：** ```css /* 組件 custom-component.wxss */ :host { color: yellow; }  <custom-component>這段文本是黃色的</custom-component> ```