[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 ```