第一步 在父组件中引入子组件

    <verificationCode

        @touchmove.stop.prevent
        v-if="delete_community_people.show"
        :key="delete_community_people.infomation.id"
        :title="'离开该社区？'"
        @cancel="delete_community_people.show=false,is_long=false" 
        @confirm="confirmleavemyCommunity">
        </verificationCode>

第二步 子组件向父组件传值

1. 在子组件中需要向父组件传值处使用this.$emit("function",param); //其中function为父组件定义函数，param为需要传递参数

//取消事件触发
        onCancel() {
            this.$emit('cancel', true);
        },

<template>
    <div>
        <!-- 弹窗蒙版 -->
        <div class="modal-mask" @touchmove.stop.prevent></div>
        <!-- 弹窗 -->
        <div class="flex_page_center">
            <div class="modal-dialog">
                <div class="modal-title">{{ title }}</div>
                <div class="modal-phonenum">手机号码 {{ phonenum | phonenumEncryption }}</div>
                <div class="modal-content">
                    <input type="text" v-model="verify_code" placeholder="请输入验证码" class="body_cart" />
                    <div class="send_btn" v-if="times_num > 0">{{ '重新发送' + times_num + 's' }}</div>
                    <div class="send_btn" @click.stop="getverification()" v-else>发送验证码</div>
                </div>
                <div class="modal-footer">
                    <div class="btn-cancel" @click="onCancel">取消</div>
                    <div class="btn-confirm" @click="onConfirm">确定</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { Throttle } from '../../utils/project-self.js';
import { showToast } from '../../utils/api-common';
export default {
    props: {
        title: {
            type: [String],
            required: true
        },
        phonenum: {
            type: [String, Number],
            default: wx.getStorageSync('userInfo').phonenum
        }
    },
    data() {
        return {
            verify_code: '',
            times_num: '',
            times_ID: ''
        };
    },
    filters: {
        //手机号脱敏显示
        phonenumEncryption(val) {
            return val.substr(0, 3) + '****' + val.substr(7, 11);
        }
    },
    methods: {
        //取消事件触发
        onCancel() {
            this.$emit('cancel', true);
        },
        //确定事件触发
        onConfirm() {
            if (this.verify_code == '') {
                showToast('请填写验证码');
                return;
            }
            this.emitConfirm();
        },
        //传递参数给父页面
        emitConfirm() {
            let data = {
                phonenum: this.phonenum,
                verify_code: this.verify_code
            };
            this.$emit('confirm', data);
        },
        //发送验证码按钮
        getverification() {
            if (this.times_num > 0) {
                return false;
            }
            this.apiCommonSendVertifyCode();
        },

        //发送验证码（防抖）
        apiCommonSendVertifyCode: Throttle(function(e) {
            this.$api.common_sendVertifyCode(
                {
                    phonenum: this.phonenum
                },
                res => {
                    showToast('已发送验证码');
                    let that = this;
                    that.times_num = 60;
                    that.times_ID = setInterval(function() {
                        that.times_num -= 1;
                        if (!that.times_num > 0) {
                            that.times_num = -1;
                            clearInterval(that.times_ID);
                        }
                    }, 1000);
                }
            );
        }, 3000)
    }
};
</script>

<style>
.modal-mask {
    width: 750px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: #000000;
    opacity: 0.3;
    overflow: hidden;
    z-index: 25;
    color: #fff;
}
.modal-title {
    padding-top: 50rpx;
    font-size: 32rpx;
    color: #333333;

    text-align: center;
}
.modal-dialog {
    margin-top: 50%;
    width: 654rpx;
    background: #ffffff;
    border-radius: 15rpx;
    overflow: hidden;
    position: fixed;
    z-index: 30;
}
.flex_page_center {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
}
.modal-phonenum {
    margin-top: 39rpx;
    text-align: center;
    color: #666666;
    font-size: 28rpx;
}
.modal-content {
    position: relative;
    padding: 50rpx 32rpx;
}

.body_cart {
    padding-left: 26rpx;
    font-size: 28rpx;

    width: 546rpx;
    height: 92rpx;
    background: #f8f8f8;
    border-radius: 4rpx;
}

.send_btn {
    z-index: 31;
    font-size: 30rpx;
    position: absolute;
    top: 75rpx;
    right: 97rpx;
    color: #fabf13;
}
.modal-footer {
    display: flex;
    flex-direction: row;
    height: 86rpx;
    border-top: 1px solid #e4e4ee;
    font-size: 34rpx;
    line-height: 86rpx;
}
.btn-cancel {
    width: 50%;
    color: #666;
    text-align: center;
    border-right: 1px solid #e4e4ee;
}

.btn-confirm {
    width: 50%;
    color: #fabf13;
    text-align: center;
}
</style>