微信小程序自定义组件（二）--组件间传值

1.创建一个组件

20180127155001440.png

上图中singerList是一个组件 songerList是父页面

2.组件引用和创建上节已经讲过 微信小程序自定义组件（一）

3.页面传值/方法到组件

//components/songList/index.wxml 文件
<singList id='singList' 
value1='str' 
value2='{{obj}}' 
isShow='{{isShow}}'
bindaction:'exFun' //exFun是你想要在组件里调用的方法名 
></songlist>

//components/songList/index.js 
Page({ 
  data:{ 
    obj:{ a:"one", b:"two" } ,
    isShow:false
  }, 
  //此处的方法名exFun和wxml里的是一致的
  exFun(v){ 
    console.log(v)//是一个对象
    console.log(v.detail.show) // 就可以拿到组件里isShow的值
  }
 })

组件里这样使用

Component({ 
   properties: { 
//配置页面传过来的值,key值要一一对应
 'value1':{ 
     type:String, //必填，目前接受的类型包括：String,Number,Boolean, Object, Array, null（表示任意类型）
     value:"" //可选，默认值，如果页面没传值过来就会使用默认值 
  },
 'value2':{ 
    type:Object, //必填，目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型） 
    value:"" //可选，默认值，如果页面没传值过来就会使用默认值 
    },
 'isShow':{ 
    type:Boolean, //必填，目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型） 
    value:"" //可选，默认值，如果页面没传值过来就会使用默认值 
    }
   }, 
  methods(){ 
    fun(){ 
      this.triggerEvent("action",{{show:this.data.isShow}}); //triggerEvent函数接受三个值：事件名称、数据、选项值 
    } 
   } 
})

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