抖音小程序自定义组件创建和使用方法

（1）什么是自定义组件

允许开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；

也可以将复杂的页面拆分成多个低耦合的模块，有助于后期代码维护工作。

（2）创建自定组件

例如：自定义组件由 json、 ttml、ttss、js 4 个文件组成；

json文件

{
  "component": true
}

ttml文件

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

ttss 文件

.header {
  color: green;
}

js文件构建方法

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

（3）如何调用自定义组件

首先要在页面的 json 文件中进行引用声明

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

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

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