Question

我有两种不同类型的模态：大模态（800x500）和小模态（300x200）。

在我网站的不同组件中，我想打开这些模式，所有内容都有不同的内容。甚至一些模态也应该打开其他模态。我目前正在考虑这个应用程序结构：

modals/
|- largeModals/
|   |- profile.vue
|   |- messages.vue
|- smallModals/
|   |- enter.vue
|   |- disable.vue
|   |- confirm.vue
|- largeModal.vue
|- smallModal.vue

largeModal.vue和smallModal.vue是基本布局组件，文件夹中的文件是模态的内容。

从其他组件中打开新模态的最佳方法是什么？参数可以传递非常重要。例如，profile模式应该在显示用户配置文件之前收到user_id来查询数据库。

例如，

This project使用Mixin方法显示模态，但其他一些建议使用Plugin，因此覆盖问题较少。

从任何组件内部或在$this.openModal('profile', userId)之类的其他模态中打开模态的最佳方法是什么？为什么？我正在使用Vue.js 2.

Answer 1

最简单的方法是创建全局事件总线

createVector()

就全局而言，通过//Example Vue.EVENTS = new Vue()发出的所有事件都可以在组件树中的任何位置进行侦听。

例如，请检查此插件的工作原理：https://github.com/euvl/vue-js-modal/

Vue js模态：mixin或插件？

1 个答案: