课堂学习：自定义组件
一、自定义组件
1.需要在目录里新建一个文件夹components 在此文件夹内放自定义组件的文件
在components内新建文件夹并重命名 右击此文件夹 选择新建Component
之后此文件夹中会出现四个同名文件（js json wxml wxss）
2.自定义组件导入
有两种方法 全局导入和当前页面导入
分别是在全局或者当前的json文件中导入
"usingComponents": {
"tabMenu":"../../component/tabMenu/tabMenu"
},
无论是全局还是当前页面 都是在usingComponents下写入
“自定义组件名字”:"自定义组件的路径"
注意 在全局导入时路径开头不要用./ 直接写文件名即可
当前页面导入可以支持 ./ 或者 ../
3.组件的引入
在组件的wxml和wxss中写入内容和样式 在js中写方法
在使用时 输入<tabMenu></tabMenu>（这里的tabMenu即是之前取名的文件）即可把组件的内容传入
4.组件内部可以定义数据 在js中：
组件的属性列表 properties: { },
properties: {
//定义组件需要传送的属性
label:{
//类型是字符串
type:String,
//默认值设置为空
value:''
},
list:{
type:Array
},
activeIndex:{
//类型是Number
type:Number,
//默认值一般为0
value:0
},
},
组件的初始数据 data:{ },
组件的方法 methods:{ },
methods: {
//选项点击事件
click (e){
//获取数据参数 index
let {index} = wx.$key(e)
//更新高亮索引
this.setData({
activeIndex : index
})
//触发一个自定义事件，将值通过事件对象的方式回传出去
this.triggerEvent('syncData',index)
}
}
5.自定义事件
//触发一个自定义事件，将值通过事件对象的方式回传出去
//事件名称syncData 后面传的是值 index
this.triggerEvent('syncData',index)
//每次点击这个click事件后 就会触发这个自定义事件
//然后又在页面里 bind:syncData='syncData' 定义了这个事件 如果触发了这个事件就会执行这个函数syncData
//通过这个事件对象中的detail属性会接到触发事件时回传的值 就是这个index 如果要回传很多值 就改成对象
//this.triggerEvent('syncData',{a:index,b:11,c:22})
