如何与 Vue.js 中子组件中分隔的 vuetify v-dialog 进行通信？答案

【问题标题】：How to communicate with vuetify v-dialog seperated in child component in Vue.js?如何与 Vue.js 中子组件中分隔的 vuetify v-dialog 进行通信？
【发布时间】：2020-04-03 19:54:17
【问题描述】：

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

 <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 保持为真-并且我无法通过再次单击按钮来重新呈现模式。如何正确设置这样的通信？我做错了什么？

【问题讨论】：

标签： javascript vue.js dialog vuetify.js

【解决方案1】：

哟，您必须在子组件中使用“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>

【讨论】：