从VueJS中的组件模板打开Vuetify对话框 [英] Open a Vuetify dialog from a component template in VueJS

问题描述

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

I'm using the VueJS Vuetify framework and I need to open a dialog - that gets imported as a component template - from another template. Once the Menu button in App.vue got clicked, the Modal should open. Here is my setup:

• App.vue =带菜单按钮的导航模板


• Modal.vue =模态模板，在main.js中作为全局导入

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>

如何打开对话框？

推荐答案

您可以使用自定义事件打开对话框并使用用于非父子沟通的事件总线。

You can open the dialog using custom events and using an event bus for non parent-child communication.

如果您的应用程序变得更复杂，我建议您使用 Vuex用于州管理。

If your application gets a bit more complex I recommend you use Vuex for state management.

活动总线解决方案：

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

In your main.js or in a new file create and export a new Vue instance :

export const bus = new Vue（）

在 app.vue 中导入总线并发出活动：

<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 中还导入总线并监听事件创建的钩子：

In modal.vue also import the bus and listen for the event in the created hook:

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

这篇关于从VueJS中的组件模板打开Vuetify对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！