父組件

<phone-login :rule-form="phoneForm"></phone-login>

子組件

<template>

?<div>

? ?<el-form :model="ruleForm"

? ? ? ? ? ? :rules="phoneFormRules"

? ? ? ? ? ? ref="ruleForm">

? ? ?<el-form-item prop="phone">

? ? ? ?<el-input placeholder="請輸入手機號"

? ? ? ? ? ? ? ? ?v-model="ruleForm.phone">

? ? ? ? ?<i slot="prefix"

? ? ? ? ? ? class="el-icon-phone"></i>

? ? ? ?</el-input>

? ? ?</el-form-item>

? ? ?<el-form-item prop="code">

? ? ? ?<el-row :gutter='18'>

? ? ? ? ?<el-col :span="18">

? ? ? ? ? ?<el-input placeholder="請輸入驗證碼"

? ? ? ? ? ? ? ? ? ? ?v-model="ruleForm.code">

? ? ? ? ? ? ?<i slot="prefix"

? ? ? ? ? ? ? ? class="el-icon-tickets"></i>

? ? ? ? ? ?</el-input>

? ? ? ? ?</el-col>

? ? ? ? ?<el-col :span="6">

? ? ? ? ? ?<el-button>發送驗證碼</el-button>

? ? ? ? ?</el-col>

? ? ? ?</el-row>

? ? ?</el-form-item>

? ? ?<el-form-item>

? ? ? ?<el-button type="primary"

? ? ? ? ? ? ? ? ? style="width:100%">登錄</el-button>

? ? ?</el-form-item>

? ?</el-form>

?</div>

</template>

<script>

export default {

?name: 'PhoneLogin',

?props: {

? ?ruleForm: {

? ? ?type: Object,

? ? ?require: true

? ?},

? ?countDown: {

? ? ?type: Number,

? ? ?default: 60

? ?},

? ?data () {

? ? ?const checkPhone = (rule, value, callback) => {

? ? ? ?if (!value) {

? ? ? ? ?return callback(new Error('手機號不能為空'))

? ? ? ?} else {

? ? ? ? ?const reg = /^1[3|4|5|7|8][0-9]\d{8}$/

? ? ? ? ?if (reg.test(value)) {

? ? ? ? ? ?callback()

? ? ? ? ?} else {

? ? ? ? ? ?return callback(new Error('請輸入正確的手機號'))

? ? ? ? ?}

? ? ? ?}

? ? ?}

? ? ?return {

? ? ? ?phoneFormRules: {

? ? ? ? ?phone: [{ validator: checkPhone, trigger: 'change' }],

? ? ? ? ?code: [{ require: true, message: '驗證碼不能為空', trigger: 'blur' }]

? ? ? ?}

? ? ?}

? ?}

?}

}

</script>