从 VueJS 中的组件模板打开 Vuetify 对话框 [英] Open a Vuetify dialog from a component template in VueJS
问题描述
我正在使用 VueJS Vuetify 框架，我需要打开一个对话框 - 该对话框被导入为组件模板- 来自另一个模板.点击 App.vue 中的 Menu 按钮 后，Modal 应该会打开.这是我的设置:
- App.vue = 带有菜单按钮的导航模板
- Modal.vue = 模态模板，在 main.js 中作为全局导入
main.js
从'./components/Modal.vue'导入ModalVue.component('modal', Modal)Modal.vue 模板:
<v-layout row justify-center><v-btn color="primary" dark @click.native.stop="dialog = true">打开对话框</v-btn><v-dialog v-model="dialog" max-width="290"><v-card><v-card-title class="headline">使用谷歌的定位服务?</v-card-title><v-card-text>让 Google 帮助应用确定位置.这意味着向 Google 发送匿名位置数据，即使没有应用在运行.</v-card-text><v-card-actions><v-间隔></v-间隔><v-btn color="green darken-1" flat="flat" @click.native="dialog = false">不同意</v-btn><v-btn color="green darken-1" flat="flat" @click.native="dialog = false">同意</v-btn></v-card-actions></v-card></v-对话框></v-layout><脚本>导出默认{数据 () {返回 {对话:假}}}如何打开对话框?
您可以使用自定义事件和使用 非父子通信的事件总线.
如果您的应用程序变得更复杂，我建议您使用 Vuex 进行状态管理.
<小时>事件总线解决方案:
在你的 main.js 或一个新文件中创建并导出一个新的 Vue 实例:
export const bus = new Vue()
在 app.vue 中导入 bus 并发出事件:
<div><button @click.prevent="openMyDialog()">我的按钮</button><脚本>import {bus} from '../main'//从 main.js 或新文件导入总线导出默认{方法: {openMyDialog () {bus.$emit('dialog', true)//将事件发送到总线}}}
在 modal.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 = navigation template with Menu button
- Modal.vue = Modal template, imported as global in main.js
main.js
import Modal from './components/Modal.vue'
Vue.component('modal', Modal)
Modal.vue Template:
<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>
How to open the dialog?
You can open the dialog using custom events and using an event bus for non parent-child communication.
If your application gets a bit more complex I recommend you use Vuex for state management.
Event bus solution:
In your main.js or in a new file create and export a new Vue instance :
export const bus = new Vue()
In app.vue import the busand emit the event:
<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>
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屋！
