Vue js modal: Mixen oder Plugin?

Question

Ich habe zwei verschiedene Modelltypen: große Modale (800x500) und kleine Modale (300x200).

Innerhalb von verschiedenen Komponenten auf meiner Website möchte ich diese Modale öffnen, alle mit unterschiedlichem Inhalt innerhalb. Und selbst sollten einige der Modals auch andere Modalitäten öffnen. Ich bin zur Zeit über diese App Struktur denken:

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

largeModal.vue und smallModal.vue sind die grundlegenden Komponenten-Layout, werden die Dateien in den Ordnern sind die Inhalte der Modalverben.

Was wäre der beste Weg, ein neues Modal aus anderen Komponenten zu öffnen? Es ist sehr wichtig, dass ein Parameter übergeben werden kann. So sollte zum Beispiel das profile Modal eine user_id empfangen, um die Datenbank abzufragen, bevor das Benutzerprofil angezeigt wird.

This project zum Beispiel unter Verwendung der Mixin Methode modals angezeigt werden, aber einige andere vorschlagen, ein Plugin so gibt es weniger Probleme mit Überschreibungen zu verwenden.

Was wäre der beste Weg, um ein Modal innerhalb einer Komponente oder innerhalb eines anderen Modals wie $this.openModal('profile', userId) zu öffnen? Und warum? Ich verwende Vue.js 2.

Answer 1

Der einfachste Weg, globalen Event-Bus

//Example 
Vue.EVENTS = new Vue() 

Was zu schaffen, wie es global ist, werden alle Ereignisse, die durch EVENTS emittiert werden könnte überall gehört werden in Ihrem Komponentenbaum.

Überprüfen Sie zum Beispiel, wie dieses Plugin funktioniert: https://github.com/euvl/vue-js-modal/