Как сделать компонент модальной формы и работать с ней из разных компонентов?

Question

[Дмитрий Баскаков]

Нужно запилить модальную/всплывающую форму, к которой я смогу достучаться из разных компонентов. Например, мне нужно вызвать форму по нажатию кнопки в шапке и по нажатию кнопки на услуге - всё это разные компоненты разной вложенности, и как мне их связать с компонентов модальной формы?

Comments

[Александр Маджугин]

Что значит "связать"?

Answer 1

[Aetae]

Vuex/eventBus.

Answer 2

[Александр Маджугин]

APP.popup = function (component,props) {
	let mount_poiunt = document.createElement('div');
	document.body.append(mount_poiunt);
	
	var props = {
		'component':component,
		'props':props
	}
	
	var Popup = Vue.extend({
		data: function () {
			return props
		},
		destroyed () {
			this.$el.remove()
		},
		methods: {
			close: function () {
				this.$destroy()
			}
		},
		template: `<div class="popup">
						<span v-on:click="close" class="close">✖</span>
						<component v-bind:is="component" v-on:close="close" v-bind="props"/>
					</div>`
	})
	
	new Popup().$mount(mount_poiunt)
};

Далее ты просто делаешь так в методе компонента своего:

APP.popup('имяКомпонентаКоторыйНадоПоказатьВПопапе', {параметрыЭтогоКомпонента});