Vue многоразовый диалог

Question

Понятия не имею, как сделать модал многократного использования в vue. Итак, моя идея - у меня есть глобальный плагин, который добавляет глобальный метод $modal в Vue, у меня есть базовый шаблон ModalBase.vue с header, footer частями.

ModalBase.vue

<template>
    <div>
        <slot name="modal-header"/>
        <slot name="modal-footer"/>
    </div>
</template>

со следующего кода

import MyModal from 'MyModal.vue'
mounted () {
    this.$modal.open(MyModal, someData, modalOptions)
}

Мне нужно получить новое комбинированное модальное окно от слияния ModalBase.vue и MyModal.vue. Шаблон MyModal.vue необходимо поместить между верхним и нижним колонтитулами ModalBase. Если MyModal уже имеет нижний колонтитул или часть заголовка, он будет перезаписывать те же самые части ModalBase. Все логические и someData мутации должны быть помещены в MyModal.vue. Так что в моем случае ModalBase как шаблон для модального окна.

Может быть, есть более простое решение для достижения этой цели.

Answer 1

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

Подобные слои могут усложнить задачу, если вы пытаетесь передавать данные между ними, поэтому вам следует быть осторожным с этим.

Кроме того, приведенный выше код шаблона, скорее всего, не будет работать, поскольку, как показывает ошибка, «шаблон компонента должен содержать ровно один корневой элемент». Так что вам нужно:

<template>
  <div>
    <slot name="modal-header"/>
    <slot name="modal-footer"/>
  </div>
</template>