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

这是我的密码：

        <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-dialog提取到一个组件中。我不知道如何管理

showDialog

。我应该用道具吗？我现在不应该从组件内部修改道具。另一种方式是什么？

我从来都不喜欢用反应式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>

在父组件上：

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

---

您可以将函数用作更改另一组件中的

showDialog

值的道具。（避免获取错误

避免直接变异道具
）

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>

<template>
  <example :hideDialog="hideMethod" :showDialog="showDialog"></example>
</template>

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

<template>
  <example :hideDialog="hideMethod" :showDialog="showDialog"></example>
</template>

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