Вызов глобальной popup от вложенных Вью компоненты


У меня есть тонны вложенных компонентов вю, что нужно уметь открывать глобальные модала. Чтобы избежать тонн слушателей и излучатели пробиравшиеся все через приложение, я использую VueX. Основное приложение имеет модальный которые отображаются, если модальное состояние не определено.

Шаблон root приложение

<template>
   <components></components>
   <popup v-if="popupImage" :image="popupImage"></popup>
</template>

Root приложение сценарий

import { State } from 'vuex-class'
@State(state => state.popupImage) popupImage:string

Вложенный компонент

Из компонентов я установить всплывающее строку, которая вызовет глобальный модальные:

this.$store.commit("setPopup", "bla.jpg")

Все это прекрасно работает, но кажется немного перебор для добавления VueX только для модального окна? Остальные приложения не использовать VueX на всех. Каков рекомендуемый способ для открытия модального из любого места в приложении вю?



536
1
задан 3 февраля 2018 в 10:02 Источник Поделиться
Комментарии
2 ответа

Ваше решение, кажется, работает и не может создать ненужную путаницу для других разработчиков (или в полгода). И хотя Vuex кажется перебор в настоящее время оно может быть полезно позднее.

Одна вещь, которая я не уверен, о том, как модальное закрыт. Я предполагаю, что это осуществляется с помощью компонента отображения изображения, задав значение в магазине Vuex на пустую строку или null.

В случае, если вы хотите, чтобы избежать использования Vuex можно использовать простую шину событий реализации модель публикации и подписки. Это может быть построен с использованием самого вю. Пример:

const EventBus = new Vue();

Это может быть прикреплен к window объект или хранится в отдельном файле и включены таким же образом, как компоненты. Вы можете затем mounted крючок/метод вю компонент, который обрабатывает модальные делать:

Vue.component('modal-component-name', {
...
mounted() {
EventBus.$on('event-name', () => { ... });
}
});

Это позволит прослушивать события с именем: 'событие-имя'. Затем, чтобы вызвать событие, выполните следующие действия в другом компоненте:

Vue.component('component-which-trigger-modal', {
...
methods: {
openModal() {
EventBus.$emit('event-name');
}
}
});

Это также поддерживает, предоставляя аргументы, когда событие происходит.

Имейте в виду, постбэк не удаляется, когда компоненты разрушается. Для того чтобы обеспечить множественные слушателя обратного вызова делает то же самое, не привязан, когда компонент загружается снова использовать вю.$выкл() метод, когда компонент разрушается. Это может быть сделано путем реализации destroyed метод на экземпляр компонента, который вызывается непосредственно перед уничтожением объекта. Для этого необходимо сохранить ссылку на используемую обратного вызова, так что вы не сможете пройти анонимный метод, как я сделал в Примере.

Простой учебник для события автобус можно найти здесь: создание глобального события автобус с Vue.js.

2
ответ дан 4 февраля 2018 в 01:02 Источник Поделиться

Всемирный автобусный событие-это решение, но так как вы должны слушать излучает в компоненты, установленные или созданные крюк жизненного цикла, она становится дублируется в каждом конкретном случае.

Я имел же проблема и решается она путем установки моего всплывающее компонент динамически и установка его в прототип моего Вью экземпляр.

Пример;

import Vue from 'vue';
import Popup from '@/components/Popup.vue';

Vue.prototoype.$popup = new Vue(Popup).$mount();

Представьте, что у вас есть show метод в Popup компонент. Теперь с этой инъекции вы можете использовать его в любом компонента;

this.$popup.show();

3
ответ дан 1 марта 2018 в 03:03 Источник Поделиться