vue子组件通知父组件使用方法

vue子组件通知父组件使用方法

<template>
     <mt-field  placeholder="验证码" v-model="getverifycode" :attr="{maxlength: 4}">
      <img :src="imgcode" class="verifycode">
      <i class="icon iconfont iconefresh" @click="getVcode">&#xe6f0;</i>
    </mt-field>
</template>

<script>
import { Toast } from 'mint-ui'
import '../utils/http'
import { createguid } from '../utils/util'
import axios from 'axios'
export default {
    data() {
        return {
            imgcode: ''
        }
    },
    props: ['verifycode'],
    mounted: function() {
        this.getVcode()
    },
    computed: {
        getverifycode: {
            get: function() {
                return this.verifycode //将props中的verifycode值赋给getverifycode
            },
            set: function(val) {
                this.$emit('input', val) //通过$emit触发父组件
            }
        }
    },
    methods: {
        getVcode: function() {
            let guid = createguid()
            var vm = this
            axios
                .post('接口url', {
                    requestId: guid
                })
                .then(response => {
                    if (response.data.result.returnCode == '0') {
                        this.imgcode = 'data:image/png;base64,' + response.data.content
                        this.$emit('vcodeguid', guid) //通过$emit触发父组件
                    } else {
                        Toast('网络不给力，请重试')
                    }
                })
                .catch(error => {
                    console.log(error)
                })
        }
    }
}
</script>

父组件使用方法

<template>
  <div>
      <mt-header fixed title="页面名称">
        <router-link to="-1" slot="left">
          <mt-button icon="back"></mt-button>
        </router-link>
      </mt-header>
    <div class="content">
      <div class="mail-info-txt">
        <p>邮箱：{{email}}</p>
      </div>
      <div class="mailconfirm_form">
        <div class="fill-in-list">
            <Verifycode ref="vcode" v-model="verifycode" v-on:vcodeguid="handleVcodeguid"></Verifycode>
        </div>
        <mt-button type="primary" size="large" :class={active:isActive} @click="resetpsd" :disabled="isBtnDisable"> 发送到该邮箱 </mt-button>
      </div>
    </div>   
  </div>
</template>

<script>
import { Toast } from 'mint-ui'
import { MessageBox } from 'mint-ui'
import '../utils/http'
import { createguid, getStore, getCookie } from '../utils/util'
import axios from 'axios'
import Verifycode from '@/components/verifycode'   //调用子组件

export default {
    data() {
        return {
            email: '', //邮箱
            verifycode: '', //验证码
            isBtnDisable: true,
            isActive: false,
            imgcode: '',
            requestId:''
        }
    },
    //监听verifycode值变化切换按钮能否点击
    watch: {
        verifycode: function(val) {
            if (val) {
                this.isBtnDisable = false
                this.isActive = true
            } else {
                this.isBtnDisable = true
                this.isActive = false
            }
        }
    },
    created: function() {
        let userinfo = JSON.parse(getCookie('userInfo'))
        this.email = userinfo ? userinfo.email : ''
    },
    components: {
        Verifycode     //声明子组件
    },
    methods: {
        handleVcodeguid: function(guid) {  //自定义方法触发事件
            this.requestId = guid
        },
        resetpsd: function() {
            let vm = this
            axios
                .post('接口url', {
                    Email: this.email,
                    RequestId: this.requestId,
                    Code: this.verifycode,
                })
                .then(response => {
                    var data = response.data
                    if (data.result.returnCode == '0') {
                        MessageBox.alert('已发送至您的邮箱，请注意查收').then(action => {
                            vm.$router.go(-2) 
                        })
                    } else {
                        Toast(data.result.resultMsg)
                        this.$refs.vcode.getVcode()
                    }
                })
                .catch(error => {})
        }
    }
}
</script>