我不知道问题是Vue、Webpack、Javascript、Node还是其他什么,但我有三个文件:
components/MyComponent.vue
仅模板组件
components/index.js
:
import ComponentA from './componentA';
import ComponentB from './componentB';
import MyComponent from './MyComponent';
import ComponentD from './componentD';
export { ComponentA, ComponentB, MyComponent, ComponentD };
page/SomePage.vue
:
<template>
{{ someValue() }}
<my-component>
</my-component>
</template>
<script>
import { ComponentA, ComponentB, MyComponent, ComponentD } from '@/assets';
export default {
name: "SomePage",
components: {
MyComponent
},
computed: {
someValue() {
console.log({ ComponentA, ComponentB, MyComponent, ComponentD });
return 1;
}
}
}
</script>
你会想到的
-
要在浏览器中呈现的模板
-
{ ComponentA: (...), ComponentB: (...), MyComponent: (...), ComponentD: (...) }
要多次记录到控制台。
会发生什么
-
浏览器中不会呈现任何内容
-
排队
{ ComponentA: (...), ComponentB: (...), MyComponent: undefined, ComponentD: undefined }
就是控制台。
-
然后是错误
Unknown custom element: <my-component> - did you register the component correctly?
已记录
-
{组件A:(…),成分B:(…),MyComponent:(…),成分:(…)}
多次记录到控制台。
也就是说,导入发生了,但为时已晚,注册无法成功。绕过再出口
import { ComponentA, ComponentB, ComponentD } from '@/assets';
import MyComponent from '@/assetsMyComponent;
解决了这个问题。
用英国作家、评论家和政治家爱德华·乔治·布尔沃·利顿的话说,WTF?â
