组件模板和样式

解释：类似于页面，自定义组件拥有自己的 swan 模板和 css 样式。

组件模板

组件模板的写法与页面模板相同。组件模板与组件数据结合后生成的节点树，将被插入到组件的引用位置上。

在组件模板中可以提供一个 <slot> 节点，用于承载组件引用时提供的子节点。

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

  1. <!-- 组件内部模板 -->
  2. <view class="wrapper">
  3.     <view>组件内部节点</view>
  4.     <slot></slot>
  5. </view>
  1. <view>
  2.     <custom-component>
  3.         <view>这里是插入到组件slot中的内容</view>
  4.     </custom-component>
  5. </view>

模板数据绑定

与普通的 SWAN 模板类似，可以使用数据绑定，这样就可以向子组件的属性传递动态数据。

  1. <view>
  2.     <custom-component prop-a="{{dataFieldA}}" prop-b="{{dataFieldB}}">
  3.         <view>这里是插入到组件slot中的内容</view>
  4.     </custom-component>
  5. </view>

在以上例子中，组件的属性 propA 和 propB 将收到页面传递的数据。页面可以通过 setData 来改变绑定的数据字段。

组件的 slot

解释：
在组件的视图模板中可以通过 slot 声明一个插槽的位置，其位置的内容可以由外层组件或者页面定义。

代码示例

  1. <!-- 组件中的定义 -->
  2. <view>
  3.     <slot></slot>
  4. </view>
  1. <!-- 使用组件的页面或者组件 -->
  2. <view>
  3.     <custom-component>
  4.         <view>我是slot中插入的节点</view>
  5.     </custom-component>
  6. </view>

通过 name 属性可以给 slot 命名。一个视图模板的声明可以包含一个默认 slot 和多个命名 slot。外层组件或页面的元素通过 slot=”name” 的属性声明，可以指定自身的插入点。

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

  1. <view>
  2.     <slot name="slot1"></slot>
  3.     <slot name="slot2"></slot>
  4. </view>
  1. <view>
  2.     <custom-component>
  3.         <view slot="slot1">我会被插入到组件上方</view>
  4.         <view slot="slot2">我会被插入到组件下方</view>
  5.     </custom-component>
  6. </view>

slot 指令应用

解释：
在 slot 声明时应用 if 或 for 指令，可以让插槽根据组件数据动态化。
代码示例

  1. <view>
  2.     <slot s-if="!visible" name="subcomponent"></slot>
  3. </view>

数据环境

解释：
插入 slot 部分的内容，其数据环境为声明时的环境。

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

  • SWAN
  • JS
  • SWAN
  • JS
  1. <!-- custom-component自定义组件 -->
  2. <view class="component-range">
  3.     <slot name="inner"></slot>
  4. </view>
  1. Component({
  2.     data: {
  3.         name: 'swan-inner'
  4.     }
  5. });
  1. <!-- 使用组件的页面或者组件 -->
  2. <view>
  3.     <custom-component>
  4.         <view>{{name}}</view>
  5.     </custom-component>
  6. </view>
  1. Page({
  2.     data: {
  3.         name: 'swan-outer'
  4.     }
  5. });

渲染结果：

  1. <view>
  2.     <view class="component-range">
  3.         <view>swan-outer</view>
  4.     </view>
  5. </view>

slot 插槽

解释：

如果 slot 声明中包含 s-bind 或 1 个以上 var- 数据前缀声明，该 slot 为 scoped slot。scoped slot 具有独立的数据环境。 scoped slot 通常用于组件的视图部分期望由外部传入视图结构，渲染过程使用组件内部数据。

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

  • SWAN
  • JS
  1. <!-- custom-component自定义组件 -->
  2. <view class="component-range">
  3.     <slot name="inner" var-name="name"></slot>
  4. </view>
  1. Component({
  2.     data: {
  3.         name: 'swan-inner'
  4.     }
  5. });
  • SWAN
  • JS
  1. <!-- 使用组件的页面或者组件 -->
  2. <view>
  3.     <custom-component>
  4.         <view>{{name}}</view>
  5.     </custom-component>
  6. </view>
  1. Page({
  2.     data: {
  3.         name: 'swan-outer'
  4.     }
  5. });

渲染结果：

  1. <view>
  2.     <view class="component-range">
  3.         <view>swan-inner</view>
  4.     </view>
  5. </view>

组件样式

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

组件的样式，可以在组件的 css 文件中编写，并且只对当前组件内节点生效。使用时，需要注意以下几点：

  1. 只可以使用 class 选择器，其他的选择器，请改为 class 选择器实现；
  2. 组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现，如遇，请避免使用；
  3. 继承样式，如 font 、 color，会从组件外继承到组件内。

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

  • SWAN
  1. <!-- custom-component自定义组件 -->
  2. <view class="wrapper wrapperTwo">
  3.      <view>这里是组件的内部节点</view>
  4. </view>

外部样式类

解释：

当组件希望接受外部传入的样式类（类似于 view 组件的 hover-class 属性）时，可以在 Component 中用 externalClasses 字段定义若干个外部样式类。 > 小程序基础库版本 1.13.29 开始支持。

注意：在同一个节点上使用普通样式类和外部样式类时，请避免出现两个类的优先级是未定义的情况。

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

  • JS
  • SWAN
  1. /* 组件 custom-component.js */
  2. Component({
  3.     externalClasses: ['external-class']
  4. });
  1. <!-- 组件 custom-component.swan -->
  2. <view class="external-class">这段文本的颜色由组件外的 class 决定</view>

组件的使用者可以像使用其他属性一样，指定这个样式类对应的 class 。

  • SWAN
  • CSS
  1. <!-- 使用组件的页面或者组件 -->
  2. <custom-component external-class="red-text" />
  1. .red-text {
  2.     color: red;
  3. }

同时，可以支持指定多个对应的 class 。

代码示例

  • SWAN
  1. <!-- 使用组件的页面或者组件 -->
  2. <my-component my-class="red-text bg-color" />

全局样式类

解释：

使用外部样式类可以让组件使用指定的组件外样式类，如果希望组件外样式类能够完全影响组件内部，可以将组件构造器中的options.addGlobalClass字段置为true。 > 小程序基础库版本 1.13.29 开始支持。

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

  • JS
  • SWAN
  • CSS
  1. /* 组件 custom-component.js */
  2. Component({
  3.     options: {
  4.         addGlobalClass: true,
  5.     }
  6. });
  1. <!-- 组件 custom-component.swan -->
  2. <text class="global-class">这段文本的颜色由组件外的 class 决定</text>
  1. /* 组件外的样式定义 */
  2. .global-class {
  3.     color: red;
  4. }

常见问题

Q：使用自定义组件时，如何设置胶囊字体颜色

A：请在 page 的 json 文件中设置 navigationBarTextStyle 。