创建组件

新建目录

一个组件由四部分组成，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>

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

巴特西

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