具体步骤如下：
1.创建一个组件
组件为了规范通常放在conponents里
图中的singerList就是一个组件，组件为了规范通常放在conponents里。
2.在页面的json文件里引用组件
//想在index.wxml中引用，则对应的index.json要这样配置
{
"usingComponents": {
"songList":"/components/songList/songList"
}
}
引用后就可以在wxml文件里用了
//index.wxml
...
<songList id='songList'></songlist>
...
标签名字记得对应json文件里的对应的组件的key值
3.使用组件的方法和属性
组件内定义了一个fun的方法
//songList.js
Component({
...
methods: {
fun(v){
console.log(v)
}
}
...
})
在页面里可以这样调用
Page({
...
onready(){
this.singList = this.selectComponent("#singList");
this.singList.fun("value");
//value
}
...
})
4.页面传值/方法到组件
页面里这样配置
//index.wxml
...
<songList
id='songList'
value1='str'
value2='{{obj}}'
bind:action:'exFun'
//exFun是你想要在组件里调用的方法名
>
</songlist>
...
//index.js
Page({
data:{
obj:{
a:"one",
b:"two"
}
},
exFun(v){
console.log(v)
}
})
组件里这样使用
Component({
...
properties: {
//配置页面传过来的值,key值要一一对应
'value1':{
type:String, //必填，目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
value:"" //可选，默认值，如果页面没传值过来就会使用默认值
},
'value2':{
type:Object, //必填，目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
value:"" //可选，默认值，如果页面没传值过来就会使用默认值
}
},
methods(){
fun(){
this.triggerEvent("action");
//triggerEvent函数接受三个值：事件名称、数据、选项值
}
}
...
})
