vue-property-decorator用法介绍

Posted 2023-04-13

参考技术A 在Vue2.0中使用TypeScript语法时，需要引用 vue-property-decorator。

vue-property-decorator 完全依赖于 vue-class-component ，因此在使用vue-property-decorator之前可以先了解下vue-class-component。

这里有几个装饰器和一个函数(Mixin):

@Component
即使没有组件也不能省略@Component，否则会报错。

组件引用

@Prop 父子组件之间值的传递

相当于

如果你不想设置每个prop的type类型，你可以使用 reflect-metadata .

@PropSync
相当于在父组件中添加.sync装饰器, 使子组件也可以更新prop的值。具体查看 .sync 修饰符

@Watch 监听属性

相当于：

@Emit

相当于：

mixins 混入公共方法

计算属性
使用时只需 get 开头 + 方法 + 返回值

vue-property-decorator - npm
vue-class-component

TypeScript 抱怨使用 vue-property-decorator 定义的现有 Vue 组件属性

【中文标题】TypeScript 抱怨使用 vue-property-decorator 定义的现有 Vue 组件属性

【英文标题】：TypeScript complains about existing Vue component property defined with vue-property-decorator

【发布时间】：2019-12-05 00:56:45

【问题描述】：

我有一个 Vue 组件，它有一个使用装饰器定义的属性：

import  Component, Vue  from "vue-property-decorator"
@Component(
             props: 
               myId: String,
             ,
           )
class TestProp extends Vue 
  myFunction(obj: any) 
    return obj[this.myId] // here tslint complains: "Property 'myId' does not exist on type 'TestProp'."
  

我可以通过将this 转换为any 来避免类型错误：

  myFunction(obj: any) 
    return obj[(this as any).myId]
  

但这与其说是解决方案，不如说是一种解决方法。

我猜编译器不知道@Component 装饰器定义的属性？

有什么想法吗？

【问题讨论】：

请分享完整的错误详情

【参考方案1】：

我推荐你使用这个库：https://github.com/kaorun343/vue-property-decorator

这样你就可以在你的组件类中声明你的道具了。

例如：

import  Vue, Component, Prop  from 'vue-property-decorator'

@Component
class TestProp extends Vue 
  @Prop(String) myId: string!

【讨论】：

我添加了另一个答案，但这是我一直在寻找但没有找到的。 Vue需要转换成这种方式而不是单个装饰器

这种声明属性的方式非常好，谢谢！

【参考方案2】：

TypeScript example 声明您必须自己在组件中记录它们。

从那个页面

  // additional declaration is needed
  // when you declare some properties in `Component` decorator

import  Component, Vue  from "vue-property-decorator"
@Component(
  props: 
    myId: String,
  ,
)
class TestProp extends Vue 

  myId: string;

  myFunction(obj: any) 
    return obj[this.myId] // here tslint complains: "Property 'myId' does not exist on type 'TestProp'."
  

【讨论】：

感谢您指出这个例子。但是，在示例中，propMessage 没有在类中再次声明...

那个例子是错误的，你用它不会编译的