介绍
收藏
我的收藏

开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。

创建自定义组件

类似于页面，一个自定义组件由 json、 ttml、ttss、js 4 个文件组成。要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（设置component 字段设为 true 可将这 4 个文件视为自定义组件）：

{
  "component": true
}

同时，还要在 ttml 文件中编写组件模版，在 ttss 文件中加入组件样式，它们的写法与页面的写法类似。具体细节和注意事项参见组件模版和样式。

代码示例：

<view class="my-custom-component">
  <text class="header">{{ headerText }}</text>
  <view class="content">
    <slot></slot>
  </view>
</view>

下列样式只应用于这个自定义组件

.header {
  color: green;
}

在自定义组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法。

组件的属性值和内部数据将被用于组件 ttml 的渲染，属性值是可由组件外部传入的。更多细节参见 Component 构造器。

Component({
  properties: {
    // 定义 headerText 属性，可以在使用组件时由外部传入。该变量可以直接在自定义组件 ttml 中使用
    headerText: {
      type: String,
      value: "default title",
    },
  },
  data: {
    // 自定义组件内部属性
    defaultStates: {},
  },
  methods: {
    // 自定义组件内部方法
    customMethod: function () {},
  },
});

使用自定义组件

使用已注册的自定义组件前，首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径：

{
  "usingComponents": {
    "my-component": "path/to/a/custom/component"
  }
}

这样，在页面的 ttml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值。

<view class="component-wrapper">
  <my-component header-text="My Title"></my-component>
</view>

自定义组件的 ttml 节点结构在与数据结合之后，将被插入到引用位置内。

使用提示:

•

因为 ttml 节点标签名只能是小写字母、中划线和下划线的组合，所以自定义组件的标签名也只能包含这些字符。

•

自定义组件也是可以引用自定义组件的，引用方法类似于页面通过usingComponents 引用自定义组件。

介绍收藏我的收藏

创建自定义组件

使用自定义组件

介绍
收藏
我的收藏