从 VueJS 中的组件模板打开 Vuetify 对话框

Question

我正在使用 VueJS Vuetify 框架，我需要从另一个模板打开一个对话框 - 作为组件模板导入。单击 App.vue 中的 菜单 按钮 后，模式应打开。这是我的设置：

• App.vue = 带菜单按钮的导航模板
• Modal.vue = 模态模板，在 main.js 中作为全局导入

主程序

import Modal from './components/Modal.vue'
Vue.component('modal', Modal)

Modal.vue 模板：

 <template>
  <v-layout row justify-center>
    <v-btn color="primary" dark @click.native.stop="dialog = true">Open Dialog</v-btn>
    <v-dialog v-model="dialog" max-width="290">
      <v-card>
        <v-card-title class="headline">Use Google's location service?</v-card-title>
        <v-card-text>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="green darken-1" flat="flat" @click.native="dialog = false">Disagree</v-btn>
          <v-btn color="green darken-1" flat="flat" @click.native="dialog = false">Agree</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-layout>
</template>
<script>
  export default {
    data () {
      return {
        dialog: false
      }
    }
  }
</script>

如何打开对话框？

原文由 Tom 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用自定义事件打开对话框，并使用 事件总线进行非父子通信。

如果您的应用程序变得有点复杂，我建议您使用 Vuex 进行状态管理。

---

事件总线解决方案：

在您的 main.js 或新文件中创建并导出一个新的 Vue 实例：

export const bus = new Vue()

在 app.vue 中 导入 bus 并发出事件：

 <template>
  <div>
    <button @click.prevent="openMyDialog()">my button</button>
  </div>
</template>

<script>
  import {bus} from '../main' // import the bus from main.js or new file
  export default {
    methods: {
      openMyDialog () {
        bus.$emit('dialog', true) // emit the event to the bus
      }
    }
  }
</script>

在 modal.vue 中 还导入总线并在创建的钩子中监听事件：

 <script>
  import {bus} from '../main'
  export default {
    created () {
      var vm = this
      bus.$on('dialog', function (value) {
        vm.dialog = value
      })
    }
  }
</script>

原文由 Soleno 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

不需要事件总线和 v-model

更新：

当我第一次回答这个问题时，我将我的答案作为“解决方法”发布，因为当时感觉并不完全“正确”，而且我是 Vue.js 的新手。我想通过使用 v-model 指令打开或关闭对话框，但无法实现。一段时间后，我 在文档中找到了如何 使用 输入事件 和 值属性 来执行此操作，下面是我认为应该在没有事件总线的情况下完成的方法。

父组件：

 <template>
   <v-btn color="accent" large @click.stop="showScheduleForm=true">
   <ScheduleForm v-model="showScheduleForm" />
</template>

<script>
import ScheduleForm from '~/components/ScheduleForm'

export default {
  data () {
    return {
      showScheduleForm: false
    }
  },
  components: {
    ScheduleForm
  }
}
</script>

子组件（ScheduleForm）：

 <template>
<v-dialog v-model="show" max-width="500px">
  <v-card>
    <v-card-actions>
      <v-btn color="primary" flat @click.stop="show=false">Close</v-btn>
    </v-card-actions>
  </v-card>
</v-dialog>
</template>

<script>
export default {
  props: {
     value: Boolean
  },
  computed: {
    show: {
      get () {
        return this.value
      },
      set (value) {
         this.$emit('input', value)
      }
    }
  }
}
</script>

原答案：

我能够在不需要全局事件总线的情况下解决这个问题。

我使用了一个带有 getter 和 setter 的计算属性。由于 Vue 会警告您直接改变父属性，因此在 setter 中我只是向父属性发出一个事件。

这是代码：

父组件：

 <template>
   <v-btn color="accent" large @click.stop="showScheduleForm=true"></v-btn>
   <ScheduleForm :visible="showScheduleForm" @close="showScheduleForm=false" />
</template>

<script>
import ScheduleForm from '~/components/ScheduleForm'

export default {
  data () {
    return {
      showScheduleForm: false
    }
  },
  components: {
    ScheduleForm
  }
}
</script>

子组件（ScheduleForm）：

 <template>
<v-dialog v-model="show" max-width="500px">
  <v-card>
    <v-card-actions>
      <v-btn color="primary" flat @click.stop="show=false">Close</v-btn>
    </v-card-actions>
  </v-card>
</v-dialog>
</template>

<script>
export default {
  props: ['visible'],
  computed: {
    show: {
      get () {
        return this.visible
      },
      set (value) {
        if (!value) {
          this.$emit('close')
        }
      }
    }
  }
}
</script>

原文由 Matheus Dal‘Pizzol 发布，翻译遵循 CC BY-SA 4.0 许可协议