Vue + TypeScript 使用 vue-property-decorator 用法总结

简介

属性

@Component (完全继承于vue-class-component)
@Emit
@Inject
@Provice
@Prop
@Watch
@Model
Mixins (在vue-class-component中定义);
@Ref

用法

@Component

@Emit

@Inject

@Provice

@Prop

@Watch

@Model

Mixins

@Ref

// - 在 vue-property-decorator 中 访问子组件方法可以使用
// Property 'list' does not exist on type 'Vue | Element | (Vue | Element)[]'.
// Property 'list' does not exist on type 'Vue'.
this.$refs.UserMessageComponent.list;
// 解决办法
(this as any).$refs.UserMessageComponent.list;
(this as any).$refs.UserMessageComponent.del();
// 也可以使用 @Ref 代替

@Ref 装饰器接收一个可选择参数，用来指向元素或者子组件引用信息。如果没有提供参数，会使用装饰器后面的属性名作为参数

@Ref(refkey?: string) 参数!: 参数类型;

新建文件index.vue 和 userMessage.vue 两个文件

// userMessage.vue

新建 index.vue

// userMessage.vue

持续更新中。。。