vue组件之间的通信

父组件从子组件获取数据：

1.ref方式，把子组件当作一个对象，通过对象的方法获取数据，前提是子组件中提供了获取数据的方法
例子：

/** 组件获取表单数据 */
        getFormData() {
            const params = {
                prizeList: this.prizeList.map(it => ({
                    lotteryProbability: Number(it.form.lotteryProbability),
                    photo: it.form.photo,
                    prizeDrawNum: it.form.prizeDrawNum ? parseInt(it.form.prizeDrawNum, 0) : 0,
                    prizeId: it.form.prizeId,
                    prizeName: it.form.prizeName,
                    prizeNum: it.form.prizeNum ? parseInt(it.form.prizeNum, 0) : 0,
                    prizeType: it.form.prizeType,
                })),
            };
            return params;
        },

父组件使用子组件

  <draw-award :show-prize-list="showPrizeList" ref="drawAward"></draw-award>

获取数据

// 获取数据
getdrawAwardData() {
            const data = this.$refs.drawAward.getFormData();
            return data;
        },

2.通过子组件emit的方式传递出去，父组件通过@的方式获取传递出来的数据
例子：
子组件

this.$emit('confirm', this.whiteList);

父组件获取

<draw-lottery @confirm="getwhiteUser"></draw-lottery>

// 白名单用户数据
        getwhiteUser(list) {
            for (let i = 0; i < list.length; i++) {
                this.whiteUser[i] = list[i].userMobile;
            }
            const params = {
                userIdList: this.whiteUser,
            };
            this.darwUserIdList = params;
            console.log('白名单用户列表为:', this.darwUserIdList);
        },

子组件获取父组件的数据

1.父组件把数据传递，子组件声明props的值来接收
例子
父组件

<detail-form :baseInfo=baseInfo></detail-form>

子组件

props: {
        baseInfo: { // 正确的数据传入，exp: [{title: 'label', value: 'content'}]
            type: Object,
            default() {
                return {
                    activityCode: 'NO001',
                    activityName: '年末大抽奖',
                    activeCreateTime: '2019-06-07 12:30:00',
                    activeEndTime: '2019-06-09 12:30:00',
                    activeType: '九宫格',
                    activeStatus: '启用',
                    voterNum: '10000',
                    enterNum: '20',
                    activeRule: {
                        crowdfundAllGetMaxNum: 5,
                        crowdfundDayGetMaxNum: 0,
                        crowdfundDayGetNum: 1,
                        firstGetNum: 5,
                        prizeDrawAllNum: 20,
                        prizeDrawDayNum: 0,
                    },
                    activeRemark: '超级无敌优惠活动，吐血回馈用户。超级无敌优惠活动，吐血回馈用户。超级无敌优惠活动，吐血回馈用户。超级无敌优惠活动，吐血回馈用户',
                };
            },
        },
    },