问题描述
我在尝试学习VUE然后使用了VUE-ADMIN-TEMPLATE的模板, 在登录模块发现了一个问题, 我加了一个registry 注册的组件, 点击时弹出一个对话框, 如果注册成功,希望这个对话框能自动消失。 首先想到的就是父组件通过 :visible.sync=“showRegistry=true” 传递值给子组件,子组件用$emit更新showRegistry的值, 但是无论我怎么试都不成功。
相关代码
// 这是父组件关于visible:sync代码:
<el-dialog :visible.sync="showRegistry">
<registry />
</el-dialog>
// 定义 showRegistry在父组件的data中:
data(){
return {
showRegistry: false
}
}
// 子组件接收 showRegistry (我试了各种写法,['showRegistry']或者目前这样省略default值,都传不回去):
export default{
name: 'Registry',
props: {
showRegistry: {
type:Boolean,
default: true
}
}
// 子组件传showRegistry的新值:
onRegistry(){
console.log(this.registryForm)
this.$refs.registryForm.validate(valid => {
if(valid){
var secret = setAsSha(this.registryForm.password)
const data = { "email" : this.registryForm.email,
"username" : this.registryForm.username,
"secret" : secret }
console.log(data)
this.loading = true
registryUser(data).then(response => {
if (response.code == 20000 && response.showMsg == true) {
console.log("Before emit showRegitry = " + this.showRegistry)
this.$emit('update:showRegistry', false)
console.log("After emit showRegistry = " + this.showRegistry)
this.loading = false
}
})
} else {
console.log("Unknow error")
return false
}
})
}
我也在两个组件写了watch 这个showRegistry的值:
在注册对话框弹出来的时候,showRegistry的值变化了 第一个箭头就是watch检测到的变化。 然后在子组件里,这个值从头到尾就没变化过, 子组件的watch一直没有反应。。 第二个箭头表示的就是this.$emit.("update:showRegistry", false) 前后的log, 我没法理解。。
我感觉像是emit没有传送到值,但是不知道为啥,也不知道怎么解决
###我之前在做这个模态框的框的时候也用这个:visible.sync,属实很麻烦,一个大神直接告诉我了一个方法,希望能帮上你的忙
父组件
<button @click='clickBut()'></button>
// 这里是调用模态框组件的按钮
<popup @close="show = false" v-if="show" ></popup>
// 调用子组件,这里就不用多说了,先默认为false
data(){
show:false
},
methods:{
// 点击显示模态框
clickBut(){
this.show = true;
}
}
子组件
<el-dialog
title="模态框"
:visible = true
@close="$emit('close')"
>
<div>模态框内容</div>
<div slot="footer" class="dialog-footer">
<el-button @click="$emit('close')">取 消</el-button>
</div>
</el-dialog>
###感谢:大牛带我飞
我后来也找到了这个方法, 是可行的