将对话框移动到Vuetify中的一个组件

Question

这是我的代码：

<v-btn @click="showDialog = true" >
<v-dialog
v-model="showDialog"
max-width="600"
>
<v-btn @click="showDialog = false">save</v-btn>
</v-dialog>
</v-btn>

我知道这是一个相当简单的代码，但我想将整个v对话框提取到一个组件中。我不知道如何管理showDialog。我应该用道具吗？我现在不应该从组件内部修改道具。另一条路是什么？

Answer 1

我从来都不喜欢用反应v模型值来驱动对话框的可见性。通常，对话框在显示和隐藏之前需要做一些设置和状态相关的事情。

因此，我所做的是将showDialog移动为组件本身的隐藏内部值，在组件上放置ref=，在组件中实现open()方法，并在我想显示它时调用它。

当对话框执行比只显示静态信息更复杂的任务时，这种模式感觉更自然。

所以在你的情况下：

<script id="myDialog" type="text/x-template">
<v-dialog
v-model="showDialog"
max-width="600"
>
<v-btn @click="save">save</v-btn>
</v-dialog>
</script>
[...]
<v-btn @click="openMyDialog">
<myDialog ref="myDialog">
</myDialog>
</v-btn>

在myDialog:上

data: function () {
return {
[ other attributes ]
showDialog: false
}
},
methods: {
[ other methods ]
open: function (initializationData) {
[ initialization code ]
this.showDialog = true;
},
save: function (event) {
[ save code ]
this.showDialog = false;
}
}

在父组件上：

methods: {
[ other methods ]
openMyDialog: function (event) {
this.$refs.myDialog.open([ initialization data ]);
}
}

Answer 2

您可以使用一个函数作为道具来更改另一个组件中showDialog的值。(为避免出现错误avoid mutating a prop directly(

exampleComponent.vue

<template>
<v-dialog v-model="showDialog" max-width="600">
<v-btn @click="hideDialog">save</v-btn>
</v-dialog>
</template>
<script>
export default {
props: {
showDialog : Boolean ,
hideDialog: Function,
},
};
</script>

mainFile.vue

<template>
<example :hideDialog="hideMethod" :showDialog="showDialog"></example>
</template>
<script>
export default {
data() {
return {
showDialog : false
}
},
methods: {
hideMethod() {
this.showDialog = false;
},
},
};
</script>