Question

我不知道如何在Vue中制作可重用的模式。因此，我的想法是-我有一个全局插件，该插件向Vue添加了全局方法$modal，我有具有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>

Vue可重用对话框

1 个答案: