组件 WXML 模板：

组件模板的写法与页面模板相同。

模板数据绑定：

与普通的 WXML 模板类似，可以使用数据绑定。

<!-- custom-component.wxml --><view>{{transferVal}}{{personalVal}}</view>// custom-component.jsComponent({properties: {transferVal: {type: String,value: '我是引用自定义组件的页面传递过来的数据'}},data: {personalVal: '我是自定义组件的内部数据'},})<!--index.wxml--><custom-component transfer-val="{{pageVal}}" />

组件模板的 slot：

在组件的 wxml 中可以包含 slot 节点，用于承载组件使用者提供的 wxml 结构。

默认情况下，一个组件的 wxml 中只能有一个 slot 。

<!-- 自定义组件 sort-tabs.wxml --><view><view>这里是组件的内部节点</view><slot></slot></view><!-- 引用自定义组件的页面 index.wxml --><view><sort-tabs><!-- 这部分内容将被放置在 sort-tabs 组件 <slot> 的位置上 --><view>这里是插入到自定义组件 slot 位置的内容</view></sort-tabs></view>

需要使用多 slot 时，可以在组件 js 中声明启用，然后就可以在这个组件的 wxml 中使用多个 slot 了，以不同的 name 来区分；在使用自定义组件时，用 slot 属性来将节点插入到不同的 slot 上。

// 自定义组件 sort-tabs.jsComponent({options: {multipleSlots: true // 在 options 选项中启用多 slot 支持}})<!-- 自定义组件 sort-tabs.wxml --><view class="wrapper"><slot name="before"></slot><view>这里是组件的内部细节</view><slot name="after"></slot></view><!-- 引用自定义组件的页面 index.wxml --><view><sort-tabs><!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 --><view slot="before">这里是插入到组件 slot name="before"中的内容</view><!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 --><view slot="after">这里是插入到组件 slot name="after"中的内容</view></sort-tabs></view>

组件 WXSS 样式：

组件对应 wxss 文件的样式，只对组件 wxml 内的节点生效。

组件和引用组件的页面不能使用 id 选择器、属性选择器和标签名选择器，推荐使用 class 选择器。

组件和引用组件的页面中使用后代选择器在一些极端情况下会有非预期的表现，要避免使用。

子元素选择器只能用于 view 组件与其子节点之间，用于其他组件可能导致非预期的情况。

继承样式，如 font 、 color 等会从组件外继承到组件内。除继承样式外，app.wxss中的样式、组件所在页面的的样式对自定义组件无效（除非更改组件样式隔离选项）。

组件可以指定它所在节点的默认样式，使用:host选择器。

/* 组件 sort-tabs.wxss */:host {color: yellow;}<!-- 页面的 WXML --><sort-tabs>这段文本是黄色的</sort-tabs>

组件样式隔离：

默认情况下，自定义组件的样式只受到自定义组件 wxss 的影响，除非以下两种情况：

app.wxss或页面的 wxss 中使用了标签名选择器或一些其他特殊选择器来直接指定样式，这些选择器会影响到页面和全部组件，通常情况下这是不推荐的做法。

指定特殊的样式隔离选项 styleIsolation：可以在页面或自定义组件的 json 文件中配置 styleIsolation，也可以在 js 中声明。

styleIsolation 选项支持以下取值：

isolated：默认值。表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响。apply-shared：表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面。shared：表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了apply-shared或shared的自定义组件。

如果这个 Component 构造器用于构造页面，则默认值为 shared，且还有以下几个额外的样式隔离选项可用：

page-isolated：表示在这个页面禁用app.wxss，同时页面的 wxss 不会影响到其他自定义组件。page-apply-shared：表示在这个页面禁用app.wxss，同时页面 wxss 样式不会影响到其他自定义组件，但设为 shared 的自定义组件会影响到页面。page-shared：表示在这个页面禁用app.wxss，同时，页面 wxss 样式会影响到其他设为apply-shared或 shared 的自定义组件，也会受到设为 shared 的自定义组件的影响。

// json{"styleIsolation": "isolated"}// jsComponent({options: {styleIsolation: 'isolated'}})

外部样式类：

可以在 Component 中用 externalClasses 定义段定义若干个外部样式类，在组件中接收外部传入的样式类。

在同一个节点上使用普通样式类和外部样式类时，两个类的优先级是未定义的，要避免这种情况。

<!-- 自定义组件 custom-component.wxml --><view class="external-class">这段文本的颜色由组件外的 class 决定</view>/* 自定义组件 custom-component.js */Component({externalClasses: ['external-class']})<!-- 引用自定义组件的页面 index.wxml --><custom-component external-class="text-color"></custom-component>/* 引用自定义组件的页面 index.wxss */.text-clolr {color: red;}

引用页面或父组件的样式：

即使启用了样式隔离 isolated ，组件仍然可以在局部引用组件所在页面的样式或父组件的样式。

例如，如果在引用组件的页面 wxss 中定义了：

.blue-text {color: blue;}

在这个组件中可以使用~来引用这个类的样式：

<view class="~blue-text"> 这段文本是蓝色的 </view>

如果在一个组件的父组件 wxss 中定义了：

.red-text {color: red;}

在这个组件中可以使用^来引用这个类的样式：

可以连续使用多个 ^ 来引用祖先组件中的样式。

<view class="^red-text"> 这段文本是红色的 </view>

虚拟化组件节点：

默认情况下，自定义组件本身的那个节点是一个普通的节点，使用时可以在这个节点上设置 class style 、动画、 flex 布局等，就如同普通的 view 组件节点一样。

<!-- 页面的 WXML --><view style="display: flex"><!-- 默认情况下，这是一个普通的节点 --><custom-component style="color: blue; flex: 1">蓝色、满宽的</custom-component></view>

但有些时候，自定义组件并不希望这个节点本身可以设置样式、响应 flex 布局等，这种情况下，可以将这个自定义组件设置为“虚拟的”。

Component({options: {virtualHost: true},})<!-- 页面的 WXML --><view style="display: flex"><!-- 如果设置了 virtualHost ，节点上的样式将失效 --><custom-component style="color: blue">不是蓝色的</custom-component></view>