vue + ts 项目中ModelSync的用法

要使vue支持ts写法，我们需要用到vue-property-decorator，这个组件完全依赖于vue-class-componet

首先安装：

npm i -D vue-property-decorator

@ModelSync(propName: string, event?: string, options: (PropOptions | Constructor[] | Constructor) = {}) 

@ModelSync装饰器可接受三个参数:

• propName: string类型，表示类型名称；
• event: string类型，表示事件名；
• options: PropOptions | Constructor[] | Constructor与@Prop的第一个参数一致；

看下面例子：

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

@Component
export default class YourComponent extends Vue {
  @ModelSync('checked', 'change', { type: Boolean })
  readonly checkedValue!: boolean
}

以上代码等同于：

export default {
  model: {
    prop: 'checked',
    event: 'change',
  },
  props: {
    checked: {
      type: Boolean,
    },
  },
  computed: {
    checkedValue: {
      get() {
        return this.checked
      },
      set(value) {
        this.$emit('change', value)
      },
    },
  },
}