使用pascal case对vue组件进行注册,但在作为库构建时失败。

问题描述 投票:0回答:1

当使用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",那么它就会工作。 不知道如何解决这个问题。

javascript vue.js vuejs2 vue-component vuex
1个回答
0
投票

在DOM中用kebab case引用组件名已经解决了这个问题。在任何其他vue项目中,Pascal case都可以工作。

© www.soinside.com 2019 - 2024. All rights reserved.