[TOC] # 組件模板 ## 在組件模板中可以提供一個` <slot> `節點，用于承載組件引用時提供的子節點 > 在模板中引用到的自定義組件及其對應的節點名需要在 json 文件中顯式定義，否則會被當作一個無意義的節點 ``` <!-- 組件模板 --> <view class="wrapper"> <view>這里是組件的內部節點</view> <slot></slot> </view> ``` ``` <!-- 引用組件的頁面模板 --> <view> <component-tag-name> <!-- 這部分內容將被放置在組件 <slot> 的位置上 --> <view>這里是插入到組件slot中的內容</view> </component-tag-name> </view> ``` ## 組件 ### 啟用slot支持 ``` options:{ multipleSlots: true // 在組件定義時的選項中啟用多slot支持 }, ``` ### 設置插槽 ``` <view class='container tag-class'> <text>{{comment}}</text> <slot name="after"></slot> </view> ``` ## 父級頁面 ``` <block wx:for="{{hots}}" wx:key="index"> <v-tag comment="{{item.comment}}" tag-class="{{index==0?'bg':''||index==1?'bg1':''}}"> <text slot="after" class="num"> +{{item.num}}</text> //此處slot 應與 組件中 slot name相同 </v-tag> </block> ```