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

 1 <template>
 2      <mt-field  placeholder="验证码" v-model="getverifycode" :attr="{maxlength: 4}">
 3       <img :src="imgcode" class="verifycode">
 4       <i class="icon iconfont iconefresh" @click="getVcode">&#xe6f0;</i>
 5     </mt-field>
 6 </template>
 7 
 8 <script>
 9 import { Toast } from 'mint-ui'
10 import '../utils/http'
11 import { createguid } from '../utils/util'
12 import axios from 'axios'
13 export default {
14     data() {
15         return {
16             imgcode: ''
17         }
18     },
19     props: ['verifycode'],
20     mounted: function() {
21         this.getVcode()
22     },
23     computed: {
24         getverifycode: {
25             get: function() {
26                 return this.verifycode //将props中的verifycode值赋给getverifycode
27             },
28             set: function(val) {
29                 this.$emit('input', val) //通过$emit触发父组件
30             }
31         }
32     },
33     methods: {
34         getVcode: function() {
35             let guid = createguid()
36             var vm = this
37             axios
38                 .post('接口url', {
39                     requestId: guid
40                 })
41                 .then(response => {
42                     if (response.data.result.returnCode == '0') {
43                         this.imgcode = 'data:image/png;base64,' + response.data.content
44                         this.$emit('vcodeguid', guid) //通过$emit触发父组件
45                     } else {
46                         Toast('网络不给力，请重试')
47                     }
48                 })
49                 .catch(error => {
50                     console.log(error)
51                 })
52         }
53     }
54 }
55 </script>
View Code