开发
API
自2022年9月6日起,本文档站不再更新内容,相关文档已迁移至全新“抖音开放平台”前往

组件模板和样式

类似于页面,自定义组件拥有自己的 ttml 模板和 ttss 样式。

模板数据绑定

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

<!-- 引用自定义组件的页面模板 -->
<view>
  <my-component data-a="{{ data1 }}" data-b="{{ data2 }}"></my-component>
</view>

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

注意:这样的数据绑定只能传递 JSON 兼容数据。自基础库版本 2.46.0 开始,还可以在数据中包含函数,如果需要通过属性传递函数,需要在 app.json 中配置"component2": true,并将属性类型声明为 Function

{
  "component2": true
}
Component({
  properties: {
    funcProp: Function,
  },
});

插槽 slot

在组件的 ttml 中可以包含 slot 节点,用于将组件使用者提供的 ttml内容分发到组件中的指定位置。

<!-- 自定义组件模板 -->
<view>
  <slot>
    <view>无子节点时会显示当前备用内容</view>
  </slot>
</view>
<!-- 引用自定义组件的模板 -->
<custom-component>
  <view>组件slot内容</view>
</custom-component>

具名插槽

需要使用多个slot 时,可以使用不同的 name 来区分。

<!-- 自定义组件模板 -->
<view class="wrapper">
  <slot name="before"></slot>
  <view>自定义组件</view>
  <slot name="after"></slot>
</view>

使用时,用 slot 属性来将节点插入到不同的 slot 上。

<!-- 引用自定义组件的模板 -->
<view>
  <custom-component>
    <!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
    <view slot="before">这里是插入到组件slot name="before"中的内容</view>
    <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
    <view slot="after">这里是插入到组件slot name="after"中的内容</view>
  </custom-component>
</view>

name属性可以传入动态值来动态设置内容被分发的位置。

<!-- 引用自定义组件的模板 -->
<custom-component>
  <view slot="{{slotName}}"></view>
</custom-component>
Page({
  data: {
    slotName: "before",
  },
  onTap() {
    this.setData({ slotName: "after" });
  },
});

组件样式

组件对应 ttss 文件的样式,只对组件 ttml 内的节点生效。编写组件样式时,需要注意以下几点:

  • 继承样式,如 fontcolor ,会从组件外继承到组件内;
  • 除继承样式外,app.ttss 中的样式、组件所在页面的的样式对自定义组件无效。

另外,自定义组件节点默认会被一层 inline 元素包裹,直接在自定义组件节点上使用 padding/margin/height 等样式不生效,如有在自定义组件节点上直接设置上述样式的需要,请先设置为 block 等样式。

<custom-component
  style="display:block;padding:10px;background-color:red"
></custom-component>

外部样式类

此功能正在支持中。

点击纠错
该文档是否对你的开发有所帮助?
有帮助
没帮助
该文档是否对你的开发有所帮助?
有帮助
没帮助