Javascript 如何与Vue.js子组件中分离的vuetify v-dialog通信？

我是Vue.js新手，我希望在单击按钮时显示登录对话框。我将对话框移动到子组件以保持代码尽可能干净，因此我有一个带有嵌套LoginDialog的父组件。父组件代码段如下所示：

 <div class="my-2 mx-10">
    <v-btn color="#004a04" @click="showLoginDialog">
        <p class="my-2">SIGN IN</p>
    </v-btn>
  </div>
 .... 
  showLoginDialog() {
      this.loginDialogVisibility = true;
  },
  login(username, password) {
      this.loginDialogVisibility = false;
      //login functionality
  }

登录
.... 
showLoginDialog（）{
this.loginDialogVisibility=true；
},
登录（用户名、密码）{
this.loginDialogVisibility=false；
//登录功能
}

以及子组件：

<template>
<div>
    <v-dialog v-model="visibility" max-width="300px">
        <v-card class="d-flex flex-column" height="400px">
    <v-card-title>
      <span class="headline">Sign in</span>
    </v-card-title>

    <v-col class="d-flex justify-center">
      <v-card-text>
        <v-text-field v-model="username" label="Username"></v-text-field>
        <v-text-field v-model="password" :type="'password'" label="Password"></v-text-field>
      </v-card-text>
    </v-col>

    <v-col class="d-flex justify-center">
      <v-card-actions class="card-actions">
        <v-btn text color="primary" @click="login">SIGN IN</v-btn>
      </v-card-actions>
    </v-col>
  </v-card>
</v-dialog>
</div>

登录
登录

导出默认值{
名称：“LoginDialog”，
数据（）{
返回{
用户名：null，
密码：null
}
},
道具：{
对话框可见性：{
类型：布尔型，
默认值：false
}
},
方法：{
登录（）{
这是。可见性=假；
this.$emit（“login”、this.username、this.password）；
}
},
计算：{
可见性（）{
返回此对话框可见性；
}
}
}

问题是，只有在使用关闭对话框时，loginDialogVisibility父变量才会更改为false 这是“登录”按钮。如果我通过单击背景来关闭它，loginDialogVisibility仍然为true，并且我无法通过再次单击按钮来重新渲染模态。如何正确设置这种通信？我做错了什么？

哟，您必须在子组件中使用“emit”。
顺便说一句，您不会在父组件中写入子组件的位置。您想在启动登录按钮后关闭模式，对吗

你可以这样做

// Parent Component 
<template>
<div class="my-2 mx-10">
    <v-btn color="#004a04" @click="showLoginDialog">
        <p class="my-2">SIGN IN</p>
    </v-btn>
    <child-component @show="showDialog" />
</div>
</template>

<script>
// method emitted by the child to the parent
showDialog(value) { 
      // value == true if Login is clicked
      this.loginDialogVisibility = value; 
  }
</script>


// Child Component
<template>
<v-card-actions class="card-actions">
    <v-btn text color="primary" @click="login">SIGN IN</v-btn>
</v-card-actions>
</template>

<script>
methods: {
    login(){
    ...your logic...
    // emit false value to parent to close the dialog
    this.$emit('show', false) 
    }
}
</script>

//父组件
登录
//方法由子对象发射到父对象
显示对话框（值）{
//如果单击登录，则值==true
this.loginDialogVisibility=值；
}
//子组件
登录
方法：{
登录（）{
…你的逻辑。。。
//向父对象发出假值以关闭对话框
此.$emit（'show'，false）
}
}

// Parent Component 
<template>
<div class="my-2 mx-10">
    <v-btn color="#004a04" @click="showLoginDialog">
        <p class="my-2">SIGN IN</p>
    </v-btn>
    <child-component @show="showDialog" />
</div>
</template>

<script>
// method emitted by the child to the parent
showDialog(value) { 
      // value == true if Login is clicked
      this.loginDialogVisibility = value; 
  }
</script>


// Child Component
<template>
<v-card-actions class="card-actions">
    <v-btn text color="primary" @click="login">SIGN IN</v-btn>
</v-card-actions>
</template>

<script>
methods: {
    login(){
    ...your logic...
    // emit false value to parent to close the dialog
    this.$emit('show', false) 
    }
}
</script>