小程序经常会用到自定义组件，今天来说下五星评论自定义组件，可以单纯显示评分也可以进行评分，及组件间两种通信方式
一、在你的项目中根目录新建components目录，在components目录下新建starComment目录，然后右键点击新建Component，会出现如下目录结构
二、在starComponent.json中编写：
{ "component": true,//进行自定义组件声明 "usingComponents": {} } 三、然后在starComponent.wxml和starComponent.wxss中写入： /***commentName是一个数组对象[{ name:"a",score:5//name是评分类型，score是分数 },{ name:"b",score:5 }]， commentStar是一个数组[0,0,0,0,0]或[1,1,1,1,],表示初始显示的是几颗星 ***/ <view class="trial-comments"> <block wx:for="{{commentName}}" wx:key="" wx:for-item="ritem"> <view class="trial-comment1">{{ritem.name}}： <block wx:for="{{commentStar}}" wx:key="" wx:for-index="idx"> <text class="iconfont icon-star_full {{(ritem.score-1)>=idx?'full-star':'no-star'}}" id="{{idx+1}}" data-name="{{ritem.name}}" bindtap='_bindWriteStar'></text> </block> </view> </block> </view> @import "/pages/template/iconfonts.wxss";//引入阿里图标库的图标，我这里是将所有的图标放到了模板中 .trial-comments{ padding:20rpx 30rpx; } .full-star{ color:#ef6763; font-size:34rpx; padding:0 10rpx; } .no-star{ color:#bbb; font-size:34rpx; padding:0 10rpx; } .trial-comment1{ padding:10rpx 0; } 四、1.要在那个页面引用组件，则需做一下操作，比如是在index页面，则需在index.json中声明使用组件 "usingComponents": { "starComment": "/components/starComment/starComment" } 2.然后在index.wxml中引入组件 <starComment id="starComment" commentName="{{commentName}}" commentStar="{{userComment}}" bind:writeComment="_writeComment"></starComment>。 commentName就是传入到子组件starComment的数据，也就是第三步的commentName数组对象，userComment也就是第三步传入到子组件的commentStar数组，也就完成了从父到子组件的数据传递 3.在index.js中编写事件 _writeComment: function (e) { console.log(e.detail) var type = e.detail.gradeType;//e.detail可以拿到子组件传过来的数据 var score = e.detail.score; ... } 五、接下来就是starComponent.js啦，以及子组件如何向父组件传递数据，我直接贴上代码，官网又很好说明https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html properties: { commentName:{//父组件传过来的数据 type:Array, value:[] }, commentStar:{ type:Array, value:[] }, methods: { _bindWriteStar:function(e){//第三步子组件定义的事件 console.log(e); var gradeType= e.currentTarget.dataset.name,//拿到点击的是那个评分类型 score= e.currentTarget.id;//拿到评分数 var myEventDetail={ gradeType: gradeType, score: score }; this.triggerEvent("writeComment", myEventDetail)；//通过this.triggerEvent触发在父组件也就是第四步定义的方法writeComment，并传递数据对象myEventDeta.触发成功狗，就可以在父组件中绑定的writeComment中 e.detail拿到数据 } } 六，如果此方法满足不了组件间的数据传递，还有一种方法 1.在starComponent.js定义方法中编写 methods: { _bindWriteStar:function(e){ console.log(e); var gradeType= e.currentTarget.dataset.name, score= e.currentTarget.id; var commentName = this.data.commentName; for (var i = 0; i < commentName.length; i++) { if (gradeType == commentName[i].name) { commentName[i].score = score; } } this.setData({ commentName: commentName//将评分结果更新上去，以便在父组件中拿到 }) } 2.然后在index.js中编写 onReady:function(){ this.starComment = this.selectComponent("#starComment");//this.selectComponent加上第四步引入组件，组件的id：starComment，就可以拿 到子组件实例对象 console.log(this.starComment); }, 七、最后上一个图，会根据你传入的组件对象commentName和commentStar改变评价类型和星星数，也可以点击星星进行评价
转载于:https://www.cnblogs.com/yszblog/p/10082973.html
