小程序 組件 Component

一.組件模板和樣式

相似於頁面，自定義組件擁有本身的 wxml 和模板 wxss 樣式。

   1.組件模板

組件的寫法和頁面的寫法相同，組件模板與組件數據結合後生成的數節點，

將被插入到組件的引用位置。在組件模板中提供一個<slot> 節點，用於承載組件

引用時候提供的子節點。

例如：

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

  引用在頁面的.json 文件中配置。

　　"usingComponents": { 　　"v-component": "/components/cs/cs" 　}

  "v-component" :爲自定義的模板名字，頁面引用的時候用，

  "/components/cs/cs"  引用組件的路徑

頁面中引用 以下：

　　　　<v-component>
  　　　　<view>這裏是插入到組件slot中的內容</view>
　　　　</v-component>

2.組件中的模板數據綁定

與普通的模板數據綁定相同，動態像子組件傳遞數據。

例如：

　　<v-component  prop-a="{{dataA}}" prop-b="{{dataB}}">
  　　<view>這裏是插入到組件slot中的內容</view>
　　</v-component>

組件接收到頁面傳遞過來的數據，頁面能夠經過setData 來改變綁定的綁定字段。

（目前只能傳遞JSON數據）

 3.組件的wxml 的slot

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

聲明啓用。

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

此時在組件就能夠啓用多個slot,以不一樣的name 來區分。

  例如：

　　 <view class="wrapper">
　　　　　　<slot name=「head」></slot>
   　　　　　　<view>這裏是組件的內部節點</view>
   　　　　<slot name="footer"></slot>
 　　</view>

   在使用的時候

　　　　<v-component >
  　　　　 　<view slot="head">slot中的頭部內容</view>
        　　<view slot="footer">slot中的底部內容</view>
　　　　</v-component>

4.組件樣式

組件對應wxss 文件的樣式，只對組件wxml 內的節點生效。編寫組件樣式時注意：

(1) 組件和引用的頁面，不能使用id選擇器，(#a),屬性選擇器（[a]）和標籤名屬性

 選擇器，請改用class 選擇器。

(2) 組件和引用組件的頁面中使用後代選擇器(.a .b) 在極端狀況下會有非預期的表現。

(3)子元素選擇器(.a>.b) 只能用於view 組件與其子節點之間，用於其餘組件能夠能致使

   非預期的狀況。

(4)繼承樣式，如font , color 會從外部組件繼承到組件內。

(5)除繼承樣式外，app.wxss 中的樣式，組件所在頁面中的樣式對自定義樣式無效。

（6）組件能夠指定節點的默認樣式 :host{color:yellow;}

 

5.外部樣式

組件接收外部傳入的樣式類，能夠在Component 中用externalClasses 定義若干個外部樣式

類，這個特性能夠用實現相似於，view 組件的 hover-class屬性，頁面能夠提供一個樣式類

賦予 view 的hover-class 這個同樣式類寫在頁面中，而非， view 組件的實現中。

 例如：

/* 組件 custom-component.js */

　　　　Component({ 　　　　　　externalClasses:['my-class'] 　　　　}) <!-- 組件 custom-component.wxml -->

　　　　<v-component class="my-class" >

   這段文本的顏色由外部組建的 class 以爲

</v-component>

組件的使用或者能夠指定這個樣式類對應的class, 就像使用普通屬性樣式同樣

頁面的WXML

　　　　<v-component  my-class="red-text"></v-component>
 　　　　　　.red-text{ 　　　　　　　　color:red; 　　　　　　}

 6.使用組件接收全局樣式

  默認狀況下，自定義組件的樣式只受到wxss 的影響

(1) app.wxss 中使用了標籤名選擇器，影響到頁面和所有組件，

(2) 在自定義的組件中激活了 addGlobalClass 選項，這樣使自定義

組件能被app.wxss 或頁面的wxss 中的全部樣式。

 要激活 addGlobalClass 選項，只需在Component 構造中將 options.addGlobalClass

  字段爲true (當激活了 addGlobalClass 選項後，存在外部樣式污染樣式組件的風險)

 /* 組件 custom-component.js */ Component({ options: {     addGlobalClass: true,   }   })

 /* 組件 custom-component.wxml  */

　　　　<text class="red-text"> 　　　　　　這段文字顏色由 `app.wxss`和頁面`wxss` 中的樣式定義來規定 　　　　</text>

　　　　/*app.wxxs*/ 　　　　.red-text{ 　　　　　　color:red; 　　　　}