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

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

父組件使用方法

 1 <template>
 2   <div>
 3       <mt-header fixed title="頁面名稱">
 4         <router-link to="-1" slot="left">
 5           <mt-button icon="back"></mt-button>
 6         </router-link>
 7       </mt-header>
 8     <div class="content">
 9       <div class="mail-info-txt">
10         <p>郵箱：{{email}}</p>
11       </div>
12       <div class="mailconfirm_form">
13         <div class="fill-in-list">
14             <Verifycode ref="vcode" v-model="verifycode" v-on:vcodeguid="handleVcodeguid"></Verifycode>
15         </div>
16         <mt-button type="primary" size="large" :class={active:isActive} @click="resetpsd" :disabled="isBtnDisable"> 發送到該郵箱 </mt-button>
17       </div>
18     </div>   
19   </div>
20 </template>
21 
22 <script>
23 import { Toast } from 'mint-ui'
24 import { MessageBox } from 'mint-ui'
25 import '../utils/http'
26 import { createguid, getStore, getCookie } from '../utils/util'
27 import axios from 'axios'
28 import Verifycode from '@/components/verifycode'   //調用子組件
29 
30 export default {
31     data() {
32         return {
33             email: '', //郵箱
34             verifycode: '', //驗證碼
35             isBtnDisable: true,
36             isActive: false,
37             imgcode: '',
38             requestId:''
39         }
40     },
41     //監聽verifycode值變化切換按鈕可否點擊
42     watch: {
43         verifycode: function(val) {
44             if (val) {
45                 this.isBtnDisable = false
46                 this.isActive = true
47             } else {
48                 this.isBtnDisable = true
49                 this.isActive = false
50             }
51         }
52     },
53     created: function() {
54         let userinfo = JSON.parse(getCookie('userInfo'))
55         this.email = userinfo ? userinfo.email : ''
56     },
57     components: {
58         Verifycode     //聲明子組件
59     },
60     methods: {
61         handleVcodeguid: function(guid) {  //自定義方法觸發事件
62             this.requestId = guid
63         },
64         resetpsd: function() {
65             let vm = this
66             axios
67                 .post('接口url', {
68                     Email: this.email,
69                     RequestId: this.requestId,
70                     Code: this.verifycode,
71                 })
72                 .then(response => {
73                     var data = response.data
74                     if (data.result.returnCode == '0') {
75                         MessageBox.alert('已發送至您的郵箱，請注意查收').then(action => {
76                             vm.$router.go(-2) 
77                         })
78                     } else {
79                         Toast(data.result.resultMsg)
80                         this.$refs.vcode.getVcode()
81                     }
82                 })
83                 .catch(error => {})
84         }
85     }
86 }
87 </script> 

View Code