Vue.js如何加载依赖组件

Question

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

从当前使用组件的路由器中：

import A from './A';

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

但这会在导入之前渲染模板，从而导致错误。有没有更好的方式来加载依赖项？

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

Answer 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>

请参见https://vuejs.org/v2/guide/components-registration.html#Name-Casing

Answer 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>