Vue / vue-property-decorator

---

前言

vue-property-decorator是与另一个 vue 的库 vue-class-component一样的用法. 这个装饰器库源自class 库, 只是再封装了一层, 使代码更为简洁明了
npm仓库地址
github地址

@Component()

options 里面需要配置 decorator 库不支持的属性，凡是文中没写的都是不支持的，比如components, filters, directives

@Component({
   
  components: {
    // 子组件
    HelloWorld,
  },
  filters: {
    // 过滤器
    addWorld: (value: string) => `${
     value} world`,
  },
  directives： {
   
  }
})

---

@Prop()

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

@Component
export default class YourComponent extends Vue {
   
  @Prop(Number) propA: number | undefined // Constructor
  @Prop({
    default: 'default value' }) propB!: string // PropOptions 
  @Prop([String, Boolean]) propC: string | boolean | undefined // Constructor[]
}

等同于

export default {
   
  props: {
   
    propA: {
   
      type: Number,
    },
    propB: {
   
      default: 'default value',
    },
    propC: {
   
      type: [String, Boolean],
    },
  },
}

---

@PropSync()

与 Prop 的区别是子组件可以对 props 进行更改, 并同步给父组件

// 子组件
export default class PropSyncComponent extends Vue {
   
  // @PropSync 里的参数不能与定义的实例属性同名
  @PropSync('count') private innerCou