合理的视图对话框

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获得新的组合模态窗口。需要在modalBase页眉和页脚之间放置MyModal.vue模板。如果MyModal已经有页脚或标题部分，它将覆盖相同的ModalBase部分。所有逻辑和someData突变必须放在MyModal.vue。所以在我的情况下ModalBase就像模板窗口的样板。

也许有更简单的解决方案来实现这一目标。

Answer 1

听起来你想要使用组件。检查docs它可能会有所帮助。基本上，您可以根据我的需要将组件放入组件中，然后在某个页面中使用父组件。如果你想要替换组件的一部分，如果存在子组件，我可能会开始变得有点混乱，老实说我不知道​​如何做到这一点，也许其他人会这样做。

如果您尝试在它们之间传递数据，那么像这样分层组件会使其变得更加困难，因此您需要小心这一点。

此外，您上面的模板代码可能无法正常工作，因为错误会告诉您“组件模板应该只包含一个根元素”。所以你需要：

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