当使用PascalCase作为组件名称时,组件没有被vue注册。下面是它的样子
<template>
<div>
<h6>This is a sample reusable component</h6>
</div>
</template>
<script>
export default {
name: "SampleComponent",
data() {
return {
};
}
}
</script>
我就是这样注册组件的。
import SampleComponent from './components/SampleComponent'
const components:any = {SampleComponent}
const ComponentLibrary = {
install(Vue:any, options = {}) {
for (const componentName in components) {
const component = components[componentName];
Vue.component(component.name, component);
}
}
}
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(ComponentLibrary)
}
export default ComponentLibrary;
当导入库时,我得到以下错误信息
Unknown custom element: <samplecomponent> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in <Root>)
如果我只用 "Sample",那么它就会工作。 不知道如何解决这个问题。
在DOM中用kebab case引用组件名已经解决了这个问题。在任何其他vue项目中,Pascal case都可以工作。