小程序自定義組件及組件間兩種通訊方式

小程序常常會用到自定義組件，今天來講下五星評論自定義組件，能夠單純顯示評分也能夠進行評分，及組件間兩種通訊方式

1、在你的項目中根目錄新建components目錄，在components目錄下新建starComment目錄，而後右鍵點擊新建Component，會出現以下目錄結構

2、在starComponent.json中編寫：

{

"component": true,//進行自定義組件聲明

"usingComponents": {}

}

3、而後在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;

}

4、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;

...

}

5、接下來就是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);

},

7、最後上一個圖，會根據你傳入的組件對象commentName和commentStar改變評價類型和星星數，也能夠點擊星星進行評價