## 组件模板和样式 [TOC] 类似于页面，自定义组件拥有自己的 wxml 模板和 wxss 样式。 ### 组件模板 组件模板的写法与页面模板相同。组件模板与组件数据结合后生成的节点树，将被插入到组件的引用位置上。 在组件模板中可以提供一个 `<slot>` 节点，用于承载组件引用时提供的子节点。 #### slot事例  [组件tag.wxml]() ``` <view class="container tag-class"> <text>{{comment}}</text> <slot name="after"></slot> </view> ``` >用name属性给slot起名字 [tag.js]() 在组件的wxml中可以包含 slot 节点，用于承载组件使用者提供的wxml结构。 默认情况下，一个组件的wxml中只能有一个slot。需要使用多slot时，可以在组件js中声明启用。之后，就可以在这个组件的wxml中使用多个slot，以不同的 name 来区分。 ``` options:{ multipleSlots:true }, ``` ##### 外部样式类 [index.wxss中的样式]() ``` .bg1{ background:rgb(204, 223, 230) !important; } .bg2{ background: rgb(230, 230, 204) !important; } .bg3{ background: rgb(204, 230, 222) !important; } ``` 欲使用外部css在自定义组件tag上，则在[tag.js]()中添加语句 ``` externalClasses:['tag-class'], ``` [父组件wxml]() ``` <view class="hot"> <block wx:for="{{hots}}" wx:key="index"> <tag comment="{{item.comment}}" tag-class="{{index==0?'bg1':''||index==1?'bg2':''||index==2?'bg3':''}}"> <!-- index与item一样可以直接取到 --> <text slot="after" class="num">+{{item.num}}</text> </tag> </block> </view> ``` >引用外部样式tag-class，并作三元表达式进行判断 ##### 全局样式类 ``` Component({ options: { addGlobalClass: true, } }) ``` ### 组件样式 组件对应 wxss 文件的样式，只对组件wxml内的节点生效。编写组件样式时，需要注意以下几点： 组件和引用组件的页面不能使用id选择器（#a）、属性选择器（[a]）和标签名选择器，请改用class选择器。 组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现，如遇，请避免使用。 子元素选择器（.a>.b）只能用于 view 组件与其子节点之间，用于其他组件可能导致非预期的情况。 继承样式，如 font 、 color ，会从组件外继承到组件内。 除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效。