微信小程序自定义组件
最近项目原因，开始接手小程序的知识。
自定义组件 理解起来可能不那么迅速，但是一旦你开始动手了，你就会发现还是挺简单的。
效果图展示
代码片段
以下贴出 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组件间通信与事件