微信小程序自定义组件

最近项目原因，开始接手小程序的知识。
自定义组件 理解起来可能不那么迅速，但是一旦你开始动手了，你就会发现还是挺简单的。

效果图展示

代码片段

以下贴出 html以及 js：

<!--html   choose.wxml-->
<view class='question_choose'>
<!--JS中properties下定义的标题-->
  <view class='choose_title'>{{title}}</view>
  <view class='choose_con'>
 	 <!--JS中properties下定义的选项内容-->
    <block wx:for='{{chooseList}}' wx:key="{{index}}">
      <view class='choose_list' data-index="{{index}}" bindtap='switchChoose'>
        <text class='cs_num {{choosed == index ? "suc": ""}}'>{{item.num}}</text>
        <view class='cs_info'>{{item.info}}</view>
      </view>
    </block>
  </view>
</view>

// JS      choose.js
Component({
  /**
   * 组件的属性列表
   * 用于组件自定义设置
   */
  properties: {
    // 选择标签标题
    title: {            // 属性名
      type: String,     // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: '标题'     // 属性初始值（可选），如果未指定则会根据类型选择一个
    },
    // 选项内容
    chooseList: {
      type: Array
    },

  },

  /**
   * 私有数据,组件的初始数据
   * 可用于模版渲染
   */
  data: {

  },

  /**
   * 组件的方法列表
   * 更新属性和数据的方法与更新页面数据的方法类似
   */
  methods: {
    /*
     * 公有方法
     */
    switchChoose(e){
    	//将switchChoose方法获取到的index传递出去
      this.triggerEvent('switchChoose', { 'index': e.currentTarget.dataset.index })
      console.log(e)
      this.setData({
        choosed: e.currentTarget.dataset.index
      })
    }
  }
})

/**
* choose.json
*/
{
  "component": true,   //这里很重要  表明自己的身份
  "usingComponents": {}
}

以下是点击之后打印的结果 ，我需要获取的索引值

以上组件就写完了，调用方法如下：

在需要调用的页面：

/**
* 你需要调用页面的json中  你可以理解成vue的注册
*/
{
  "usingComponents": {
    "choose": "../../choose/choose"
    //键  就是你的标签名     
    //值  文件的路劲
  }
}

<!-- 将你注册名称以标签的形式进行使用-->
<!-- title、chooseList   就是组件中声明  bind:switchChoose -->
 <choose title="{{item.title}}" chooseList="{{item.chooseList}}" bind:switchChoose="switchChoose"></choose>

注：
this.triggerEvent(‘switchChoose’, { ‘index’: e.currentTarget.dataset.index })

triggerEvent事件一共有单个参数
第一个参数：要监听的事件
第二个参数：要穿给父页面的值
第三个参数：触发事件的选项

更详细的可以去官网看demo，以下飞行器：
triggerEvent组件间通信与事件