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

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

 <template>
      <mt-field  placeholder="验证码" v-model="getverifycode" :attr="{maxlength: 4}">
       <img :src="imgcode" class="verifycode">
       <i class="icon iconfont iconefresh" @click="getVcode"></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>