1. Invalid Component name occurred when the custom directive vue. extend was generated after ts class was used

Problem Description:

Error message

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

Index. Vue file

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

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

directive.ts

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

Process:

Print components after vue.extend

console.log(SkeletonBlock.options);
console.log(Mask.options);
Copy the code

The skeleton screen component is a component named “_class3” in the options of the Mask after extend. The name change does not comply with the Vue specification for component naming, so a warning is generated.

Solution:

Before the change

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

The modified

@Component
export default class SkeletonBlock extends BaseVue {... }Copy the code

conclusion

Do not export anonymous class components when Vue uses the class notation. You can solve this problem by giving the class a name when exporting it.

Although name is already written in the @Component. But the name will only be written to the component’s options.name.

The normal form of Vue exports components as objects, whereas the class form exports a Function.

This bug occurs after vue.extend.