Есть задача сделать модальные окна на сайте. В моём понимании, я должен положить компонент модального окна в App.vue, отлавливать событие, что кто то хочет его открыть и открывать. Но как передавать компоненты в это модальное окно?
Компонент модального окна
<template>
<!-- Modal -->
<div class="modal fade" id="modalWrapper" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
/**
* Здесь необходимо рендерить компонент который пришел аргументом
* в обработчик события openMainModal.
* Вроде того <someComponent><someComponent>
*/
</div>
</div>
</div>
</template>
<script>
import {eventEmitter} from '../main'
export default {
name: "Modal",
data() {
return {
}
},
methods: {
_openModalHandler(someComponent) {
$('#modalWrapper').modal('show');
}
},
created() {
eventEmitter.$on('openMainModal', this._openModalHandler);
}
}
</script>
<style scoped>
</style>
App.vue
<template>
<div id="app">
<nav class="navbar">...</nav>
<div class="page-content-wrapper">
<router-view></router-view>
</div>
// Компонент "Модальное окно"
<modal></modal>
</div>
</template>
<script>
import Modal from './Controls/Modal'
export default {
components: {
modal: Modal
}
}
</script>
<style lang="scss">
</style>
Любой компонент, который может открывать модалки.
Например карточка товара. При клике на кнопку предосмотр, мне нужно открыть модальное окно и отрендерить в нем компонент предосмотра и быстрой покупки.
<template>
<div class="col-12 col-sm-6 col-lg-4">
<img :src="'../../static/'+product.img" alt="">
<h5 class="card-title product-title">{{product.title}}</h5>
<a href="#" @click.prevent="openModal(product)" class="form-control btn btn-outline-info">
<i class="far fa-eye"></i>
</a>
</div>
</template>
<script>
import {eventEmitter} from '../../main'
/**
* Хочется
* import {productPreviewer} from '../Controls/Product/Previewer'
*/
export default {
name: "ProductCard",
props: ['product'],
methods: {
openModal(product) {
eventEmitter.$emit('openMainModal', productPreviewer);
},
}
}
</script>
<style lang="scss" scoped>
</style>
Иерархия
App.vue
|
+--Modal
+--pages/Catalog
+--Controls
|
+--Product
|
+--Card
+--Previewer
Как такое реализовать? Или, если я вообще всё неправильно себе представляю, то как лучше сделать?