vueJS如何在呈现列表时动态导入和加载组件

Question

我正在渲染一个列表。

<div v-for="msg in messages">
   <div v-if="msg.type==='component'">
      <component v-bind:is="getComponent(msg.component)" :data="msg.data" :text="msg.text"></component>
   </div>
</div>

[如果我对组件名称进行硬编码，我可以得到一个计算属性来导入和加载组件，但是我无法将属性传递给计算属性。

如果我改为调用方法，则会出现永无休止的循环，浏览器将崩溃。

   //This works as a computed property
   getComponent() { 
      return () => import(`@/components/data/finance/GRNISummary.vue`)
   },


   //This does not work as a computed property. Computed properties can not accept parameters
   getComponent(component) { 
      const componentsList = {
        jurisdictionEvidenceCount: '/chart/export_control/JurisdictionEvidenceCount.vue',
        grniSummary: '/data/finance/GRNISummary.vue'
      }
      return () => import(`@/components` + componentsList[component])
   },


   //This as a method crashes the browser with an infinite loop of component loads 
   getComponent(component) { 
      const componentsList = {
        jurisdictionEvidenceCount: '/chart/export_control/JurisdictionEvidenceCount.vue',
        grniSummary: '/data/finance/GRNISummary.vue'
      }
      return () => import(`@/components` + componentsList[component])
  },

Answer 1

Dynamic imports use Promise internally，而Promise属性具有工厂功能-因此，是的，它

does实际上接受参数。为了使此功能有效，您将要改用computed。

require

BTW，如果您在computed: {
  getComponent() {
    const componentsList = {
      jurisdictionEvidenceCount: '/chart/export_control/JurisdictionEvidenceCount.vue',
      grniSummary: '/data/finance/GRNISummary.vue'
    }

    return component => require(`@/components` + componentsList[component]);
  }
}
中包括了vue，则实际上允许您在导入组件时删除扩展名类型。 （默认情况下，Vue CLI应该为您执行此操作）。或者，您可以通过运行resolve.extensions：
resolve.extensions

仍然是我建议的更改：
confirm it