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

源码：
myComponentPage.wxml:

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

  
    {{question}}
  
  
    {{item.option}}
  
  

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