vue-property-decorator 在vue中配合使用ts的装饰器
vue-property-decorator的介绍地址

<template>
  <div class="login">
      <input type="text" v-model="syncedName" />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";//导入装饰配置

import UpFile from "./UpFile.vue";
//导入其他vue文件
@Component({
  components: { UpFile }
})
export default class Login extends Vue {
  static ComponentName: string = "CModal";//组件名可作为子组件调用时用
  // 变量定义
  append: boolean = true;// 定义变量将不在data(){return:{}}中
  
  //prop的使用
  @Prop({
    type: String,//这里注意首字母大写
    default: "取消"//默认值
  })
 cancelBtnText!: string;//接收参数的变量
 // props使用方式不在用以下原来的方式
  // props:{
  //   cancelBtnText:{
  //     type:String,default:"取消"
  //   },
  //   name:String
  // }
  //函数将不用写在method:{}中，直接写在下面
  login(formName: any) {}
  
  // watch的使用
  @Watch("id", { immediate: true, deep: true })//id为被监听对象
  function (new: any,old: any){
  }
  // 使用PropSync做双向绑定
  @PropSync('name', { type: String }) syncedName!: string//computed使用方式
  //computed: {
  // syncedName: {
  //   get() {
  //     return this.name
  //   },
  //    set(value) {
  //    this.$emit('input', v)
  //  }
  // }
  //}
  使用Model做双向绑定
 @Model("input", { type: String })
  value!: String;
  get syncedName(): String {
    return this.value;
  }
  set syncedName(b: String) {
    this.$emit("input", b);
  }
   //model: {
   // prop: 'checked',
   // event: 'change'
 // },
 @Emit()
  addToCount(n: number) {
    this.count += n
  }
  //addToCount(n) {
  //    this.count += n
  //    this.$emit('add-to-count', n)
  //  },
  //生命周期函数使用方式不变
  mounted() {
    this.loginCode();
  }
}
</script>
<style lang="less" scoped>
}
</style>