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

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

具体步骤如下：

1.创建一个组件

图中的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:event:'exFun' //子组件触发过来的事件（为了传参）
        //exFun是你想要在组件里调用的方法名
        >
  </songlist> 
  ...

//index.js
Page({
  data:{
      obj:{
        a:"one",
        b:"two"
         }
  },
  exFun(v){
      console.log(v) 
  }
})

子组件里这样使用

Component({
  ...
  properties: {  //接受父组件传的值 相当于vue的 props；
    //配置页面传过来的值,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("event");    通过triggerEvent触发，相当于vue中的$emit()
       //triggerEvent函数接受三个值：事件名称、数据、选项值  
     }
  }
  ...
})

当调用fun（）时，则会执行index.js里的exFun