如何與 Vue.js 的子組件中分隔的 vuetify v-dialog 進行通信？

Question

我是 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
  }

和子組件：

<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>

export default {
    name: "LoginDialog",
    data() {
        return {
            username: null,
            password: null
        }
    },
    props: {
        dialogVisibility: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        login() {
            this.visibility = false;
            this.$emit("login", this.username, this.password);
        }
    },
    computed: {
        visibility() {
            return this.dialogVisibility;
        }
    }
}
</script> 

問題是 loginDialogVisibility 父變量僅在我使用“登錄”按鈕關閉對話框時才更改為 false。 如果我通過單擊背景將其關閉，則 loginDialogVisibility 保持為真-並且我無法通過再次單擊按鈕來重新呈現模式。 如何正確設置這樣的通信？ 我究竟做錯了什么？

Answer 1

喲，你必須在你的子組件中使用“發射”。
順便說一句，你不要在父組件里面寫子組件的position。 您想在登錄按鈕被觸發后關閉您的模式嗎？

你可以這樣進行。

// 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>