Vue动态导入组件答案

【问题标题】：Vue dynamic import componentsVue动态导入组件
【发布时间】：2019-02-03 17:15:00
【问题描述】：

默认情况下，我必须在 components 属性中声明要使用的组件。我想在 Ajax 请求中获取组件名称，在应用程序运行时注入组件并显示它们，而不是在应用程序启动时在 components 属性中。

在官方文档中，动态组件部分展示了如何在运行时切换组件，异步组件部分展示了如何在应用启动时在异步请求中加载组件。他们都无法解决我的问题。

【问题讨论】：

“他们俩都解决不了我的问题”
@Phil 我仍然需要在components prop 中声明组件，所以我必须知道应用启动时需要加载的组件。我想在运行时获取有关组件名称的信息。组件因最终用户不同而不同，我无法加载所有组件，因为它们太多了。
当使用<component> 时，您不需要在components 对象中预先声明组件除非您将is 绑定到一个字符串（组件name)，可以直接将is绑定到组件对象上。
@DecadeMoon 你是对的。谢谢你。在这种情况下如何使用单文件组件？
您是否看到Async Components 文档中显示的示例，其中明确指出“一种推荐的方法是将异步组件与Webpack’s code-splitting feature 一起使用”？

标签： vue.js vuejs2 vue-component

【解决方案1】：

我通过使用带有指令的is 解决了我的问题。组件在对象中声明，并通过 Ajax 作为 javascript 片段异步请求组件。并在new function(...) 中解析。

主要代码，未经测试。

let rawComp="{...}" // Your vue component declaration js object via ajax
let rawHTML="<div>...</div>"//Also your component HTML template
let rawCompWrapper=`return ${rawComp}`
let comp = (new Function(rawCompWrapper))()
comp.template = rawHTML
comp.foo=bar//Other tasks for parsing your component

<div :is="comp" v-bind="{your:'propertyValues'}"></div>

【讨论】：

您好，您如何使用 Ajax 异步请求组件以及如何解析它？可以提供示例代码吗？
感谢您的回复。实际上，几个月前我发布了一个问题stackoverflow.com/questions/53406350/…，但似乎没有任何效果。就我而言，问题是，如果我在 tomcat 中部署，则动态导入组件不起作用。
所以我一次导入所有组件并使用它。
@Sam 我认为 webpack 配置或其版本存在一些错误。 Webpack code splitting doc