vue-property-decorator 定义组件 name 记录

vue-property-decorator 组件名称定义

记录一下使用 vue-property-decorator 是因为 component name 被坑的经历

使用普通写法写 vue 组件的时候, 通常使用 name 字段声明组件名称

export default {
	name: 'MyComponet'
}

而使用 vue-property-decorator 时, 通常会直接定义 class name

import { Vue, Component } from 'vue-property-decorator';

@Component
export default class MyComponent extends Vue {}

看起来好像是没有问题, 定义了一个 name 为 MyComponent 的组件, class 的名称就是组件的名称, 但实际不是.

第一个很坑的点

在代码中 import 这个组件让后打印组件的名称, 确实会打印出 MyComponent.
就算用 MyComponet.name 去注册组件也是可以的
例如:

import Vue from 'vue';
import MyComponent from 'MyComponent';

console.log(MyComponent.name) // MyComponent
Vue.component(MyComponent.name, MyComponent);

上面的代码都是可以得到预期结果的, 但是实际上 MyComponent 这个组件的 name 并没有被定义.

为什么这么说呢? 如果你使用过组件递归就知道, 使用递归的组件必须定义组件的name, 而上面使用 vue-property-decorator 定义的组件, 无法被递归.

第二个很坑的点

当你在本地运行项目时, 递归是成功的, 但是一旦打包发布之后, 线上的结果就坑爹了.
所以必须要在 @component({name: string})定义才行

import { Vue, Component } from 'vue-property-decorator';

@Component({
	name: 'MyComponent',
})
export default class MyComponent extends Vue {}