小程序自定义组件的具体实现+页面与自定义组件间的通信

具体步骤如下：

1.创建一个组件

图中的singerList就是一个组件，组件为了规范通常放在conponents里。

2.在页面的json文件里引用组件

//想在index.wxml中引用，则对应的index.json要这样配置
{
"usingComponents": {
"songList":"/components/songList/songList"
}
}

引用后就可以在wxml文件里用了

//index.wxml
...
<songList id='songList'></songlist>
...

标签名字记得对应json文件里的对应的组件的key值

3.使用组件的方法和属性

//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函数接受三个值：事件名称、数据、选项值
}
}
...
})