小程序里的自定义组件（二）：事件的激活与监听
组件的js文件：
Component({
/**
* 组件的属性列表
*/
properties: {
//控制爱心是点亮还是灰暗
like:{
type: Boolean,
},
//显示点赞的数量
count:{
type:Number
},
//是否只读或者科操作
readOnly:{
type:Boolean
}
},
/**
* 组件的初始数据
*/
data: {
yesSrc: 'images/like.png',
noSrc: 'images/like@dis.png'
},
/**
* 组件的方法列表
*/
methods: {
onLike:function(event){
// 自定义事件
if(this.properties.readOnly){
return
}
let like = this.properties.like
let count = this.properties.count
count = like?count-1:count+1
this.setData({
count:count,
like:!like
})
// 激活
let behavior = this.properties.like?'yes':'no'
this.triggerEvent('likeClick',{
behavior:behavior,
count: count
},{})
}
}
})
想要在page页面里获取组件里的一些数据，需要在组件里激活一个自定义事件，用triggerEvent的形式。
例如： this.triggerEvent('likeClick',{
behavior:behavior,
count: count
},{})
triggerEvent的第一个参数表示事件的名字，如例子里的likeClick，第二个参数表示要传递的数据：如例子里的
{
behavior:behavior,
count: count
}，第三个参数表示触发事件的类型：
一般不填就可以了。
组件的wxml文件：
<view bind:tap="onLike" class="container">
<image src="{{like?yesSrc:noSrc}}" />
<text>{{count}}</text>
</view>
调用组件的page页面的关键js代码：
onLike: function (event) {
console.log(event)
let behavior = event.detail.behavior
console.log(behavior)
},
page界面的wxml代码：
<v-like class="like" bind:likeClick="onLike" like="{{true}}" count="{{11}}" readOnly = "{{false}}"/>
页面里要调用组件的自定义事件，就bind那个事件的名字就好了，例如我们这里bind:likeClick="onLike"
点击页面的组件的输出日志：
