Best Practice on using Multiple Dialogs

[heeh]

In Vue2,
Suppose we have two v-dialog, A and B, where A has a link to B. They share several properties.
We could implement this in many ways, but do we have a best practice on this?

1. Create one file, create two dialogs in the same level. Vuetify provides an example on this: https://vuetifyjs.com/en/components/dialogs/#nesting

// A.vue
<template>
  <container>
    <v-dialog></v-dialog>
    <v-dialog></v-dialog>
  </container>
</template>

2. Create one file, create A and put B inside A (nested dialog).

// A.vue
<template>
  <v-dialog>
    <v-dialog>
    </v-dialog>
  <v-dialog>
</template>

3. Create two files, pass relevant properties to B, close A, and open B.

// A.vue
<template>
  <v-dialog>
  </v-dialog>
</template>

// B.vue
<template>
  <v-dialog>
  </v-dialog>
</template>

Thanks!

[chenxch]

Maybe you can control the current display through vuex or provide. Of course, you can also have a global variable to control the increment of zIndex.