创建微信小程序组件的步骤

创建组件

新建目录

一个组件由四部分组成，js、json、wxml、wxss，组件其实就是页面中被拆分出来的，可以在多个页面中共同使用的小块 UI，所以看起来和新建一个页面的四个文件一样：

引入组件

找到需要使用该组件的页面，打开其 json 文件配置以下信息：

{
  "usingComponents": {
    "event-item": "../../components/event-item/event-item"
  }
}

usingComponents字段下包含了多个组件的配置信息，包括组件名称（可自定义）、组件路径（组件的相对路径）。组件名称可以与组件的文件名不同，在 wxml 使用组件时以配置的组件名称为主。

使用组件

<view class="index">
  <event-item></event-item>
</view>

灵活的组件

slot

slot 允许在使用组件时插入更多的内容。简单来讲，就是在组件内预设一个位置，使用组件时插入更多的内容到组件内。这些附加的内容位置取决于 slot 在组件内的预设位置。实际上，slot 就是组件的内容占位符。

1️⃣ 在组件中添加 slot 标签，预设后期使用组件时内容显示在组件的具体位置：

<view class="event-items">
  <view>hell world</view>
  <!-- slot -->
  <slot></slot>
</view>

2️⃣ 使用组件时，在组件中插入附加的内容：

<view class="index">
  <event-item>
    <view>more node</view>
    <view>do you have a nice day?</view>
    <view>
      you say:
      <view>yes of course!</view>
    </view>
  </event-item>
</view>

properties

为了使组件更加灵活，实现组件可配置，properties非常重要。properties 与 Vue 中的 Props 概念相同，properties 可以作为组件的参数接收外部传递进来的值。

1️⃣ 在组件 JS 文件中，Component 内添加 properties 字段。properties 是一个字典，可以接收许多值：

Component({
  properties: {
    itemType,
    eventItems
  }
}

2️⃣ 给每一个 properties 字段添加一个 type 属性，指定数据类型：

Component({
  properties: {
    itemType: {
      type: String
    },
    eventItems: {
      type: Array
    }
  }
}

3️⃣ 可以给 properties 字段添加一个 value 属性，指定默认值（可省略该步骤）：

Component({
  properties: {
    itemType: {
      type: String,
      value: 'primary'
    },
    eventItems: {
      type: Array
    }
  }
}

注意事项：字段名称必须采用驼峰命名法，组件传递值时必须采用短横线命名法，也就是说 itemType 对应 item-type。

4️⃣ 使用组件，传递值：

<view class="index">
  <event-item item-type="{{'wait'}}" event-items="{{['one', 'two', 'three']}}"></event-item>
</view>

传递值可以控制组件内部发生不一样的变化，实现组件的灵活配置。