VUE组件注册的坑之驼峰命名

一、现象

      我自定义了很多组件，并统一全局注册。其中一个3D词云组件，name设置为“det-words3d”。其他组件都没有问题，唯有这个组件一直提示未注册。

二、分析

      所有组件的格式、引入方式、注册方式都是统一的，组件本身没有任何问题。仔细观察后发现，这个组件和其他组件唯一的区别就是，name中包括一个数字。于是从组件注册的源头开始寻找原因，全局注册组件代码如下：

requireComponent.keys().forEach(fileName => {
    // 获取组件配置
    const componentConfig = requireComponent(fileName);
    const defaultName = componentConfig.default.name;
    console.log('defaultName',defaultName)
    // 获取组件的 PascalCase 命名
    const componentName = upperFirst(
        camelCase(
            // 获取和目录深度无关的文件名
            defaultName
                .replace(/\-\$/, '')
        )
    )
    console.log('componentName',componentName)
    // 全局注册组件
    Vue.component(
        componentName,
        componentConfig.default || componentConfig
    )
})

      部分输出结果如下：

      由输出结果可知，3D词云组件注册的驼峰式名称为DetWords3D。尝试在页面中局部引入3D词云组件，并注册组件名称为DetWords3D。

      惊奇的发现，在template中使用这个组件时，正确使用的标签应该是<det-words3-d>

三、结论

      由上分析可知，由于name中包含数字，转换为驼峰命名时将数字后面的d转换成了大写，虽然全局注册了3D词云组件，但注册的其实是<det-words3-d>标签，所以当使用<det-words3d>标签时，会报错，提示<det-words3d>未注册。在注册组件命名时尽量避免使用数字，更不要将数字放到一个“词”的中间。