Javascript Vue js使用ajax加载模式内容

我将vue js与laravel一起使用，在我的页面中，我有13个模态，我觉得在同一页面中插入13个模态不是一个好主意，所以我将此放在我的刀片中：

<modal v-if="showModal" @close="showModal = false">
     <header slot="header" v-html="modalHeader"></header>
     <component slot="body" :is="currentBody"></component>
</modal>

举个例子，我有两个modals“StatusModal”和“UserModal”，我将它们加载到我的js文件中，所以如果我有13个或更多modals，我将在我的js文件中加载13个组件，我需要一个解决方案，只加载我调用函数时需要的组件，是否可以在函数调用中加载组件

我尝试在ajax调用中使用ajax并加载刀片内容，并将其加载到我的模式中，但我面临一个问题，我对输入使用vue验证，因此验证不起作用（vee validate），而且任何vue变量都没有编译，我在我的模式中得到{{variable}

对于我的案例，什么是最好的解决方案？非常感谢您的帮助

聊天后编辑 找到的解决方案：

HTML:

<component slot="body" :is="currentBody"></component>

showStatus() { 
  this.dialog = true 
  System.import('./components/modals/StatusModal.vue').then((response) => { 
    this.currentBody = response
  }); 
},

---

先前的答复 如果使用vue cli网页包配置（模块），我会选择以下解决方案。关键是使用

系统。导入
。这和require是一样的，但是是异步的。即使多次调用同一文件，它也只能解析一次。它将在客户端缓存它

我在这里使用，因为管理vue模板替换要容易得多

注意，我还没有测试它。如果出现任何问题或我误解了您的案例，请告诉我。
聊天后编辑
找到的解决方案：

HTML:

<component slot="body" :is="currentBody"></component>

showStatus() { 
  this.dialog = true 
  System.import('./components/modals/StatusModal.vue').then((response) => { 
    this.currentBody = response
  }); 
},


先前的答复
如果使用vue cli网页包配置（模块），我会选择以下解决方案。关键是使用
系统。导入
。这和require是一样的，但是是异步的。即使多次调用同一文件，它也只能解析一次。它将在客户端缓存它

我在这里使用，因为管理vue模板替换要容易得多

注意，我还没有测试它。如果出现任何问题或我误解了您的情况，请告诉我。
您使用的是vue cli网页包配置吗？您使用的是vue cli网页包配置吗？我将对其进行测试并通知您，如果我运行showStatus函数和import StatusModal组件，以及在运行showUser函数和import UserModal组件之后，我有一个问题，我要两份进口的？这对性能不好？在这种情况下，您将有2次加载。这并不是性能的问题。您只需先轻轻地打勾（显示页面），然后在运行时加载所需内容。这比一开始就加载您可能需要的所有内容要好得多。这会让你的用户在页面之间等待的时间更长。他们可能正在加载无用的组件/数据。你没有提到el:#应用程序？你也没有，我使用了你的模板。由于模板位于
render
函数中，因此没有
el
选项。因此，无需指向DOM中的元素来定义组件的模板。当我删除el:“#app”时，我没有得到任何编译。我将对其进行测试，并通知您，如果我运行showStatus函数和import StatusModal组件，以及在我运行showUser函数和import UserModal组件之后，我有一个问题，我要两份进口的？这对性能不好？在这种情况下，您将有2次加载。这并不是性能的问题。您只需先轻轻地打勾（显示页面），然后在运行时加载所需内容。这比一开始就加载您可能需要的所有内容要好得多。这会让你的用户在页面之间等待的时间更长。他们可能正在加载无用的组件/数据。你没有提到el:#应用程序？你也没有，我使用了你的模板。由于模板位于
render
函数中，因此没有
el
选项。因此，无需指向DOM中的元素来定义组件的模板