微信小程序中的组件的使用，

1.在跟目录下新建components/info文件夹

2.在info右键Component新建index文件，这里会生成四个文件

3.这里的"component": true,表示的是这里是一个组件。true表示是一个组件

4.定义属性

  /**
   * 组件的属性列表
   * 定义接受的属性
   */
  properties: {
    // 左侧标题
    titles: { // 属性名
      type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: '' // 属性初始值（可选），如果未指定则会根据类型选择一个
    },
    descs: {
      type: String,
      value: ''
    }
  },

5.结构代码

<view class='payWrap'>
  <text class='title'>{{titles}}</text>
  <text class='desc'>{{descs}}</text>
  <text class='icon' bindtap='popView'>...</text>
</view>

6.到这里我们基础组件已经搭建完成

7.我们那里需要这个组件就需要到相应的xxx.json文件中配置引入组件

   {
  "usingComponents": {
    "infocell": "/components/info/index"
  }
}

这里的infocell是别名，可以取你喜欢的名称，后的的是组件的路径

8.使用组件

 <!-- 支付 -->
      <infocell titles='支付' descs='22'></infocell>
      <!-- 已选 -->
      <infocell titles='已选' descs='333'></infocell>

注意：这里的infocell 要和你配置时的别名相关

9.事件的传递，我们这里用的组件是子组件，我们需要点击组件发生相应的事件，首先我们应该在子组件中先注册事件，然后父组件执行事件

10.首先我们在子组件中绑定事件

<!--components/info/index.wxml-->
<view class='payWrap'>
  <text class='title'>{{titles}}</text>
  <text class='desc'>{{descs}}</text>
  <!--这里我们绑定了事件popView-->
  <text class='icon' bindtap='popView'>...</text>
</view>

11.然后再子组件的当前的js中注册事件

/**
   * 组件的方法列表
   */
  methods: {
    popView: function () {
      this.triggerEvent('popView')
    }
  }

12.父组件绑定事件

 <!-- 支付 -->
      <infocell titles='支付' descs='22'  bind:popView='fun1'></infocell>
      <!-- 已选 -->
      <infocell titles='已选' descs='333'  bind:popView='fun2'></infocell>

13.在父组件的js中书写方法

  fun1:function(){
    console.log('fun1');
  },
  fun2:function(){
    console.log('fun2');
  }