组件动态导入失败答案

【问题标题】：Dynamic import of component fails组件动态导入失败
【发布时间】：2021-03-31 15:02:22
【问题描述】：

我正在尝试执行this article关于组件动态导入的建议：

模板：

<component :is="componentLoader" />

脚本：

computed: {
  componentLoader () {
    const modalComponent = 'HeroBanner'
    return () => import(`@/components/template-ux/${modalComponent}.vue`)
  }
}

但我收到一个错误：

无法读取 null 的属性“值” - 在 linting 时发生 D:\projects\my-project\components\global\Modal.vue:41

是什么导致了这个问题？

编辑：第 41 行是以 return () => import... 开头的行

【问题讨论】：

你用的是哪个vue版本？我有一个关于 vue 3 的类似问题，which was answered。
这似乎是一个 eslint 配置问题，请在此处查看我的答案stackoverflow.com/a/66572162/8172857
谢谢，但我的情况似乎没有任何改变
这显然是一个 eslint 问题。使用有关 eslint 及其插件的版本信息更新您的问题。还尝试替换模板文字（在 cmets 中链接的问题的答案之一）

标签： vue.js webpack

【解决方案1】：

看起来您正在加载的组件可能缺少一些道具。您可以像这样动态地传递道具：

<component :is="componentLoader.component" v-bind="componentLoader.props"/>

computed: {
  componentLoader () {
    return {
       component: () => import(`@/components/template-ux/${modalComponent}.vue`),
       props: {
           value: 'Something'
           foo: 'Foo'
       }
    }
  }
}

【讨论】：

【解决方案2】：

根据文件中发生的情况，您有时无法动态导入组件。假设您在渲染模板时是否需要一些值。在这种情况下，您确实尝试使用 .value 访问尚未出现的东西的值。

解决方案是以经典方式导入它，或者对元素进行一些验证，例如 modal?.inputText?.value 感谢 optional chaining（顺便说一句，仅在 <script> 部分有效）。

请向我们展示Modal.vue 的内容，看看这里发生了什么。

【讨论】：