关于vue-admin-template中:visible.sync无法收子组件值的问题

Question

问题描述

我在尝试学习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没有传送到值，但是不知道为啥，也不知道怎么解决

Answer 1

我之前在做这个模态框的框的时候也用这个：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>

Answer 2

感谢：大牛带我飞
我后来也找到了这个方法， 是可行的