vuetify 说：如果你想以编程方式打开或关闭对话框，你可以使用带有布尔值的 v-model 来实现。
但是我不太清楚这意味着什么。说“使用 v-model”充其量是模糊的。父组件在设置时知道它是否应该打开，但我不清楚如何在子组件中动态更改它。我应该使用 v-bind 传递它吗？
<login v-bind:showDialog></login>
如果是，子组件如何处理？
此处的 Vuetify 对话框信息：https://vuetifyjs.com/components/dialogs
【问题讨论】：
dialog 组件，Presentational / Container 组件？使用v-model（文档中的默认值）假设您将其用作指定data 的容器组件，而不是传递props。
标签： vue.js vuetify.js
据我了解，您有一个子组件，其中有一个对话框。不确定这是否 100% 正确，但这就是我实现它的方式。带对话框的子组件：
<template>
<v-dialog v-model="intDialogVisible">
...
</template>
<script>
...
export default {
props: {
dialogVisible: Boolean,
...
},
computed: {
intDialogVisible: {
get: function () {
if (this.dialogVisible) {
// Some dialog initialization code could be placed here
// because it is called only when this.dialogVisible changes
}
return this.dialogVisible
},
set: function (value) {
if (!value) {
this.$emit('close', some_payload)
}
}
}
在父组件中我们使用它：
<my-dilaog :dialogVisible="myDialogVisible"
@close="myDialogClose">
</my-dialog>
data () {
return {
myDialogVisible: false
}
},
methods: {
myDialogClose () {
this.myDialogVisible = false
// other code
}
}
【讨论】：
Дмитрий Алферьев 的答案是正确的，但得到“避免直接改变道具”警告，因为当关闭对话框时，v-dialog 尝试将 v-model 更改为 false，而我们将 props 传递给 v-model 并且 props 值不会改变。为了防止警告我们应该使用:value, @input
<template>
<v-dialog :value="dialog" @input="$emit('update:dialog',false)" @keydown.esc="closeDialog()" >
...
</v-dialog>
</template>
<script>
export default {
props: {
dialog: Boolean
},
methods: {
closeDialog(){
this.$emit('closeDialog');
}
}
在父母中
<template>
<v-btn color="primary" @click="showDialog=true"></v-btn>
<keep-alive>
<my-dialog
:dialog.sync="showEdit"
@closeDialog="closeDialog"
>
</my-dialog>
</keep-alive>
</template>
<script>
data(){
return {
showEdit:false,
},
},
methods: {
closeDialog(){
this.showEdit = false;
},
}
【讨论】：
v-model 是一个指令。你会使用v-model，而不是v-bind。
您链接的页面有几个示例。如果你点击第一个上的<>按钮，它会显示HTML源代码
<v-dialog v-model="dialog">
v-model 在组件内名为value 的道具上进行双向绑定。当您将绑定变量的值设置为true 时，将显示对话框；当false 时，它会隐藏。此外，如果对话框被关闭，它会将变量的值设置为 false。
【讨论】：
v-model="somevariable"，其中somevariable 是您要控制对话框的父级成员。