Vue.js如何加载依赖组件答案

【问题标题】：Vue.js how to load dependent componentsVue.js如何加载依赖组件
【发布时间】：2019-09-10 21:53:14
【问题描述】：

Vue.js：如何加载依赖组件？

从路由器当前使用组件如下：

import A from './A';

export default {
    components : {
        'new-comp-A' : NewCompA 
    }
}
...

但这会在导入之前渲染模板导致错误。有没有更好的加载依赖的方法？

模板使用了 - 你是否正确注册了组件。

【问题讨论】：

我不确定我是否遵循。它给你什么错误？根据您的代码，我觉得一切正常。
但这会在导入之前渲染模板导致错误。有没有更好的方法来加载依赖项？模板使用 - 你是否正确注册了组件。
"你注册的组件是否正确"？
看起来我们需要查看您用于尝试导入组件的所有代码。我能想到的一件事是路径可能是错误的？另外，尝试使用它：<new-comp-a> 与 <new-comp-A>，这也可能是您的问题。

【解决方案1】：

您的大小写不正确。使用'NewCompA' 或'new-comp-a' 作为名称。

其实用起来会更方便

import NewCompA from 'wherever/the/component/is/defined'

export default {
  components: {
    NewCompA
  }
}

然后您的模板可以使用任一

<NewCompA></NewCompA>
<!-- or -->
<new-comp-a></new-comp-a>

【讨论】：

是的，已经修复了.. 但是我又遇到了另一个错误.. 在 beforeMount() 方法中注册组件时，我在模板中使用它...但它抛出了错误..这样做的原因是因为它需要顶部的导入库..

【解决方案2】：

再次查看您的代码后，似乎不正常。您正在将变量 A 分配给您的组件，但尝试使用变量 NewCompA..

导入它

您需要更改以下内容：

来自：

import A from './A';

export default {
    components : {
        'new-comp-A' : NewCompA 
    }
}
...

至此：

import A from './A';

export default {
    components : {
        'NewCompA' : A
    }
}
...

并像这样使用它：

<new-comp-a>

【讨论】：