如何在微信小程序中使用组件？

何为组件

组件封装一段代码，不仅可以在其他的页面中可以使用，也可以在本页面中使用，不用再重复造“轮子”。组件可以提高代码的复用率，因此善于使用组件在微信小程序开发中是非常重要的。

创建组件

在项目的根目录下创建components文件夹，用于存放项目中所有的组件，组件拥有wxml、wxss、js、json文件

你可以像普通的pages一样对待组件

<view class="event-items">
  ......
</view>

引入组件

若在index.wxml中引入组件，需要在json文件中添加组件的名称以及组件的路径，

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

在index.wxml中使用<event-item>标签，即可使用组件，

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

slot

何为slot

有时候需要为组件插入更多的节点内容，就需要在组件的指定位置预留一个位置，让外部添加更多的节点内容进来，这时使用slot标签作为占位符的存在。

使用slot

为组件中添加slot标签，

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

现在，为组件中添加更多的节点内容，

<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添加字段

Component({
  properties: {
    itemType: {
      type: String,
      value: 'wait' // 默认值
    },
    eventItems: { // 数组对象，需要由外部提供给组件
      type: Array
    }
  }
}

最好为每一个properties的元素设置type，用于指定该元素的数据属于什么类型，否则会出现Component is not found in path "components/event-item/event-item错误。

properties的属性符合驼峰命名法，而使用组件时需要使用kebab-case命名法，即itemType对应为item-type，

<view class="index">
  <event-item item-type="{{'wait'}}" event-items="{{['one', 'two', 'three']}}">
    <view>more node</view>
    <view>do you have a nice day?</view>
    <view>
      you say:
      <view>yes of course!</view>
    </view>
  </event-item>
</view>

获取到外部传递的值之后，可以做一些业务处理了，

<button wx:if="{{itemType == 'wait'}}" size="mini" bindtap="completeEventItem">√</button>
<button wx:else size="mini" bindtap="removeEventItem">×</button>

传递值可以控制组件内部发生不一样的变化（结果），实现组件的灵活配置和提升代码的复用率。