微信小程序父子组件间传值

拼搏现实的明天。 2023-03-04 15:28 12阅读 0赞

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

**父组件**

json

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

html

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

**子组件**

/**
     * 组件的属性列表
     */
    properties: {
      commentCount: {
        type: Number,
        value: 0,
      },
      commentItem: {
        type: Object,
        value: ''
      }
    },

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

/**
     * 组件挂载后执行
     */
    onLoad() {
    
      // 判断评论内容是否为空
      if (this.data.commentCount > 0) {
        this.setData({
          isCommentEmpty: false
        });
      } else {
        this.setData({
          isCommentEmpty: true
        });
      }
    },

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

**子组件**

html

/**
     * 组件的方法列表
     */
    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>

// 二级评论按钮点击
    twoLevelCommentBtnClick (e) {
      this.setData({
        placeholderInput: e.detail
      });
      consoleUtil.log("点击二级评论按钮：" + e.detail);
    },