[TOC] ## 组件wxml ``` <view class="like"> <image src="{{like?yesSrc:noSrc}}" alt="" bind:tap="onLike" ></image> <text class="count">{{count}}</text> </view> ``` ## 组件wxss ``` .like image{ width: 30rpx; height: 30rpx; vertical-align: bottom; } .like .count{ font-size: 20rpx; margin-left: 10rpx; } ``` ``` Component({ /** * 组件的属性列表 */ properties: { count:{type:Number}, like:{type:Boolean} }, /** * 组件的初始数据 */ data: { yesSrc:"image/like.png", noSrc:"image/unlike.png" }, /** * 组件的方法列表 */ methods: { onLike(){ var like = this.properties.like; var count = this.properties.count; if(like){ this.setData({ like:false, count:count-1 }) }else{ this.setData({ like:true, count:count+1 }) } var behavior = this.data.like; this.triggerEvent('like',{ behavior }) } } }) ``` ## 只能读的点赞组件 用于喜欢 ``` 在properties里加入 readOnly:Boolean 在onLike(){ 做一个判断!this.properties.readOnly 再做逻辑判断 } 在父级传值时 传readOnly:true ```