解决弹框子组件与父组件的通信问题
/** 功能分析：
* 父组件根据变量dialogVisible、dialogVis的值判断弹窗是否弹出
* 触发点击事件后改变dialogVisible、dialogVis的值
* 将dialogVisible、dialogVis改变后的值传递给子组件
* 子组件根据接收到的对应的值后判断是显示还是隐藏
* 子组件关闭后将改变后的值传递给父组件，改变变量dialogVisible、dialogVis的值(这里是通过接收父组件传递的函数来改变父组件的中变量实现)
* layer_type//弹框类型
**/
//父组件
<template>
<div v-if="dialogVisible">
<chargeLayer layer_type='2' :_dialogVisible= 'dialogVisible' :closeFunction="closeFunction"/> // :_dialogVisible= 'dialogVisible' 前面一定是有：，否则会自动默认为传递的是string类型
</div>
<div v-if="dialogVis">
<chargeLayer layer_type='1' :_dialogVisible= 'dialogVis' :closeFunction="closeFunction" :changeEmail="changeUserEmail"/>
</div>
</template>
export default {
components:{
chargeLayer //子组件注册
},
data(){
return {
myChargeData: {},
dialogVisible: false,//弹出层默认隐藏(修改密码弹框)
dialogVis: false //弹出层默认隐藏(修改邮箱弹框)
}
},
methods: {
closeFunction() {//关闭弹窗的函数
this.dialogVisible = false;
this.dialogVis = false;
},
changeUserEmail(val){//更改myChargeData中的emial
this.myChargeData.email = val;
}
}
}
子组件：
<template>
<form >
<el-dialog :title="title[layer_type-1]" :visible.sync="_dialogVisible" width="30%" :before-close="handleClose">
<div class="input_content_1" v-if="layer_type == 1">
<input type="text" placeholder="请输入新邮箱" v-model="newEmail" value="value">
</div>
<div class="input_content_2" v-if="layer_type == 1">
<input type="text" placeholder="验证码" v-model="numPwd" value="value">
<span class="reci_num" v-if = "getVer.isSend">{{getVer.num}}s</span>
<span class="reci_num" v-if="!getVer.isSend" @click="getNumpwd()">{{getVer.txt}}</span>
</div>
<div class="input_content_1" v-if="layer_type == 2">
<input type="password" placeholder="请输入当前密码" autocomplete="off" v-model="oldPwd" value="value">
</div>
<div class="input_content_2" v-if="layer_type == 2">
<input type="password" placeholder="请输入新密码" autocomplete="off" v-model="newPwd" value="value" ref="inNewPwd">
<span class="pwd_show"><img :src="[newPwdShow ? eyeClose : eyeOpen ]" @click="changeType"></span>
</div>
<span slot="footer" class="dialog-footer" v-if="layer_type == 1">
<el-button @click="handleClose" class="button_1">取 消</el-button>
<el-button type="primary" @click="updateEmail()">确 定</el-button>
</span>
<span slot="footer" class="dialog-footer" v-if="layer_type == 2">
<el-button @click="handleClose" class="button_1">取 消</el-button>
<el-button type="primary" @click="updatePwd()">确 定</el-button>
</span>
</el-dialog>
</form>
</template>
<script>
export default {
data(){
return {
title: ['修改邮箱','修改密码'],//存储弹窗title
dialogVisible: false,//默认不显示弹框
getVer: {//获取验证码
isSend: false,//是否发送验证码
txt: '发送验证码',
num: 0//默认倒计时
},
newEmail: "",//新邮箱
oldPwd: "",//当前密码
newPwd: "",//新密码
numPwd: "",//验证码
newPwdShow: false,//密码输入时是否可见
eyeClose: 'static/img/eye_close.png',
eyeOpen: 'static/img/eye_open.png'
};
props:{
layer_type: {
type:String,//type ==1 邮箱弹框，type ==2 修改密码弹框
required: true
},
_dialogVisible: {
type: Boolean,
required: true
},
closeFunction:{
type:Function,
required:true
},
changeEmail: {
type: Function
}
},
handleClose(){//关闭弹窗函数
this.closeFunction(); //调用父组件的函数，此时父组件函数内的this依旧指向父组件的Vue，因此能够切换弹框的显示和隐藏效果
},
getSeconds(){//计时器
if(checkEmail(this,this.newEmail)){
this.getVer.num = 59;
this.getVer.isSend = true;
this.interval = setInterval(this.countSub,1000);
}
},
countSub(){//计时器
if(this.getVer.num != 0){
this.getVer.num --;
}else{
this.getVer.isSend = false;
clearInterval(this.interval)
}
},
getNumpwd(){//获取验证码
if(checkEmail(this,this.newEmail)){
this.getSeconds();//开始计时
axios.post(url,{
params: params
}).then(res=>{
//do something
}).catch(err=>{
//do something
})
}
},
updateEmail(){//更新邮箱
if(checkEmail(this,this.newEmail)){
if(checkNumPwd(this,this.numPwd)) {
axios.post(url,{
params: params
}).then(res=>{
//do something
}).catch(err=>{
//do something
});
}
}
},
updatePwd(){//更新密码
axios.post(url,{
params: params
}).then(res=>{
// do something
}).catch(err=>{
// do something
})
},
removeSpacing(str){//消除空格
return str.replace(/(^\s*)|(\s*)$/g,"");
},
changeType(){
this.newPwdShow = !this.newPwdShow;
if(this.newPwdShow == true)
this.$refs.inNewPwd.type = 'text';
else
this.$refs.inNewPwd.type = 'password';
}
},
}
}
</script>
作为一名入职新人代码中可能会存在诸多不合理之处，请多指教！
