微信小程序父子组件传值

一、父组件向子组件传值（通过 properties 属性）

父组件

json

{
  "usingComponents": {
    "reply": "../../components/reply/reply"
  }
}

html 

<reply commentCount='{{commentList}}' bind:oneLevelComment='oneLevelCommentSend'></reply>

 子组件

js

/**
 * 组件的属性列表
 */
properties: {
  commentCount: {
    type: Array,
    value: [],
  },
},

然后，在子组件方法中通过 this.data.commentCount 来获取数值

/**
 * 组件挂载后执行
 */
ready: function () {
    this.setData({
      isCommentEmpty: this.data.commentCount
    });
},

 

二、子组件向父组件传值（通过 triggerEvent 事件）

需要手动触发获取

子组件

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' 把子组件的事件传递给父组件的自定义事件

<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
  });
},