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

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

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

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

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