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
}
和子组件:
<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 保持为真-并且我无法通过再次单击按钮来重新呈现模式。如何正确设置这样的通信?我究竟做错了什么?
解决方案
哟,你必须在你的子组件中使用“发射”。
顺便说一句,您不会在父组件中写入子组件的位置。您想在登录按钮被触发后关闭您的模式吗?
你可以这样进行。
// 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>
推荐阅读
- angular - 当我将属性传递给带有管道的组件时,如何将一个日期与字符串连接起来?
- java - 具有聚合内部连接的 JPA 标准查询
- c# - 如何从 C# 中的一个条件创建一个列表的子集
- java - org.apache.spark.SparkException:java.nio.BufferUnderflowException
- powershell - Powershell:在 32 位模式下运行时缺少 DLL 文件
- node.js - 无法连接到 MFQ:1433 nodejs
- php - 将 UTC0 更改为 UTC +1/+2
- javascript - 我的幻灯片不会滑到下一张幻灯片
- angular - 如何从应用程序在自定义角度库中设置路由
- javascript - Flutter Web,奇怪的文本问题,附上图片