前端踩坑记录

1. vue项目组件，使用ts class的形式后生成自定义指令 Vue.extend 时出现报错 Invalid component name

问题描述：

报错信息

[Vue warn]: Invalid component name: "_class3". Component names should conform to valid custom element name in html5 specification.

index.vue文件

import { Component } from 'vue-property-decorator';
import BaseVue from '@/helper/BaseVue';

@Component({
  name: 'skeleton-block',
})
export default class extends BaseVue {...}

directive.ts

import SkeletonBlock from './index.vue';
const Mask = Vue.extend(SkeletonBlock);

过程：

打印 Vue.extend 后的组件

console.log(SkeletonBlock.options);
console.log(Mask.options);

发现是骨架屏组件经过 extend 后，Mask的options中带有 "_class3" 命名的组件。改命名不符合 Vue 对组件命名的规范，因此产生警告报错。

解决：

修改前

@Component({
  name: 'skeleton-block',
})
export default class extends BaseVue {...}

修改后

@Component
export default class SkeletonBlock extends BaseVue {...}

总结

Vue 使用 class 类的写法时，不要导出匿名class组件。在 class 导出时给 class 加上命名即可解决。

虽然在 @Component 中已经写了 name 。但是这个name只会被写进组件的 options.name 。

普通形式的Vue导出的组件是对象形式，而class写法导出的是一个 Function 的形式。

经过 Vue.extend 后，会产生该bug。