图解微信小程序自定义组件和组件传值

源码：
myComponentPage.wxml:

<myComponent 
  question="{{quesiton.quesContent}}"
  quid="{{quesiton.quesOrder}}" 
  question="{{quesiton.quesContent}}" 
  quesOptions="{{quesiton.quesOption}}"
  trueAns="{{quesiton.trueAns}}"
  bindgetAnsItem="handleGetAnsItem"
>
</myComponent>

myComponentPage.json

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

myComponentPage.js

Page({

  data: {
    quesiton: {
      quesContent: \'test\',
      quesOrder: \'12\',
      quesContent: \'testContent\',
      quesOption: [
        {
          option: \'aaa\',
          isActive: \'activeNull\'
        },
        {
          option: \'bbb\',
          isActive: \'activeNull\'
        },
        {
          option: \'ccc\',
          isActive: \'activeNull\'
        },
        {
          option: \'ddd\',
          isActive: \'activeNull\'
        },
      ],
      trueAns: \'ccc\'
    },
    trueAnsRes: [],
    falseAnsRes: []
  },

   // 获取子组件传递过来的选择的结果
   handleGetAnsItem(e){
    // console.log(e)
    let {trueAnsRes} = this.data
    let {falseAnsRes} = this.data
    let ansItem = e.detail
    // console.log(ansItem)
    // 如果已经作答，不将重复作答的答案结果放入集合里面
    if(\'{}\' !== JSON.stringify(ansItem)){
        if(ansItem.tf){
            // 将正确结果放入正确结果集里面
            trueAnsRes.push(ansItem)
        }else{
            // 将错误结果放入正确结果集里面
            falseAnsRes.push(ansItem)
        }
    }
  },
})

myComponent.wxml

<view>
  <view class="question">
    {{question}}
  </view>
  <view 
    wx:for="{{quesOptions}}" 
    wx:key="index" 
    class="defaultOptStyle {{item.isActive}}"
    data-index="{{index}}"
    bindtap="selectAns"
  >
    {{item.option}}
  </view>
  <van-notify id="van-notify" />
</view>

myComponent.json

{
  "component": true,
  "usingComponents": {
    "van-notify": "../../library/vant/notify/index"
  }
}

myComponent.wxss

.activeTrue{
  background-color: skyblue;
}

.activeFalse{
  background-color: pink;
}
.activeNull{
  background-color: white;
}
.defaultOptStyle{
  margin-top: 30rpx;
  padding: 0 30rpx 0 30rpx;
}

.question{
  margin-top: 30rpx;
  padding: 0 30rpx 0 30rpx;
}

myComponent.js

import Notify from \'../../library/vant/notify/notify\'
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        quid: {
            type:String,
            value: \'\'
        },
        question: {
            type:String,
            value:\'\'
        },
        quesOptions: {
            type: Array,
            value: []
        },
        trueAns: {
            type: String,
            value: \'\'
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        allTyeps: [\'a\',\'b\',\'c\',\'d\'],
        question:\'question queson question qun question question question que\',
        ansItem: {},
        selectDisable: false
    },

    /**
     * 组件的方法列表
     */
    methods: {
        selectAns(e){

            let {selectDisable} = this.data
            // 作为返回给父组件的参数
            let ansItem = {}

            // 判断是否已经选择过答案了
            if(!selectDisable){
                // console.log(e.currentTarget.dataset.index)
                const {index} = e.currentTarget.dataset
                let {quesOptions} = this.properties
                let {trueAns} = this.properties
                let {allTyeps} = this.data
                // console.log(allTyeps[index] === ans)
                let count = 0;
                let {quid} = this.properties
                // console.log(quesOptions[index].option)
                // console.log(trueAns)
                for(let i=0;i<quesOptions.length;i++){
                    if(index === i && quesOptions[index].option === trueAns){
                        quesOptions[i].isActive = \'activeTrue\'
                        // console.log("答案选择正确")
                        // 设置正确答案
                        ansItem = {
                            "quid": quid,
                            "ans": trueAns,
                            "tf": true
                        }
                        break
                    }
                    count = count + 1
                }
                
                if(count>= quesOptions.length){
                    quesOptions[index].isActive = \'activeFalse\',
                    ansItem = {
                        "quid": quid,
                        "ans": allTyeps[index],
                        "tf": false
                    }
                }
                this.setData({
                    quesOptions: quesOptions,
                    selectDisable: true
                })
            }else{
                // console.log("已经做出过选择")
                Notify({ 
                    type: \'warning\', 
                    message: \'已经作答，不可重复作答\',
                    context: this
                });
            }

            // 将选择结果传递给父组件
            // this.triggerEvent("父组件事件名", 要传递的参数)
            this.triggerEvent("getAnsItem", ansItem)
        },
    }
})