一续膳、父組件向子組件傳值(通過 properties 屬性)
- 父組件
json
{
"usingComponents": {
"reply": "../../components/reply/reply"
}
}
html
<!-- 評論回復(fù) -->
<reply commentCount='{{commentList.length}}' commentAvatarUrl='{{commentAvatarUrl}}' bind:oneLevelComment='oneLevelCommentSend'></reply>
- 子組件
js
/**
* 組件的屬性列表
*/
properties: {
commentCount: {
type: Number,
value: 0,
},
commentItem: {
type: Object,
value: ''
}
},
然后算途,在子組件方法中通過 this.data.commentCount 來獲取數(shù)值
/**
* 組件掛載后執(zhí)行
*/
ready: function () {
// 判斷評論內(nèi)容是否為空
if (this.data.commentCount > 0) {
this.setData({
isCommentEmpty: false
});
} else {
this.setData({
isCommentEmpty: true
});
}
},
二、子組件向父組件傳值(通過 triggerEvent 事件)
需要手動觸發(fā)獲取
- 子組件
html
<image class='comment-comment' src='../../images/comment_comment.png' bindtap='twoLevelCommentBtnClick' data-author-name="{{commentItem.AuthorName}}"></image>
js
/**
* 組件的方法列表
*/
methods: {
// 點擊評論按鈕
twoLevelCommentBtnClick: function (e) {
let authorName = e.currentTarget.dataset.authorName;
this.triggerEvent("twoLevelCommentBtn", authorName);
},
},
- 父組件
html
通過 bind:twoLevelCommentBtn='twoLevelCommentBtnClick' 把子組件的事件傳遞給父組件的自定義事件
<!-- 評論內(nèi)容 -->
<block wx:for="{{commentList}}" wx:key="{{index}}">
<comment commentCount='{{commentList.length}}' commentItem='{{item}}' bind:twoLevelCommentBtn='twoLevelCommentBtnClick' bind:twoLevelCommentCell='twoLevelCommentCellClick'></comment>
</block>
js
// 二級評論按鈕點擊
twoLevelCommentBtnClick (e) {
this.setData({
placeholderInput: e.detail
});
consoleUtil.log("點擊二級評論按鈕:" + e.detail);
},