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 {}