[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> ```