初始模板

import { Componenet, Vue } from 'vue-property-decorator'

@Component
export default class CompnentName extends Vue {
}

@Component 和 下面的类是不相通的，他们都可以在 template 里使用，但是不能互相操作，@Component里设置data...，那么在template里可以取到，但class 里不能；反之同理

@Component({
  // 就像普通vue2一样，vue所有的api都可以写在这里name，components，props，provide，inject，watch，filters，data，生命周期函数，method，computed....
  // 但是全写在这里，ts的用处就几乎体现不出来了，为此，data，各种类型函数可以酌情写在下面的类里
})

interface User {
  id?: string
  firstname?: string
  lastname?: string
  gender?: number
}

export default class CompnentName extends Vue {
  
  //data
  userInfo: User = {}

  //method
  getUserInfo() {
    Axios.get('/userinfo').then((userinfo: User) => {
      this.userInfo = userinfo
    }).catch((reson: string) => {
      //......
    })
  }
  //computed       必须用 get 标注
  get fullName():string {
    return this.userInfo.firstnaem + this.userInfo.lastname
  }
  
  //ref
  <div @click="printMyDiv" ref="myDiv"></div>
  @Ref('myDiv') readonly custiomRefname!: HTMLElement
  printMyDiv() {
    console.log(custiomRefname)
  }
  
  //prop
  @Prop({from: 'propsname', {default: 'default value'}}) readonly customName!: string
  //propSync
  @PropSync({from: 'propsname', {default: 'default value'}}) readonly customName!: string

  //watch()
  @Watch('name', { immediate: true, deep:true})
  onWatchHandel(newValue: string, oldValue: string):void {  //自定义名字，上面watch的函数
    console.log(newValue, oldValuw)
  }

  //provide
  @Provide('custom-name')
  coutomName = 'msg was provide'

  //inject
  @Inject({from: 'custom-name'}) readonly customName!: string
}

Emit比较特别

先传return，后传参数
普通函数是执行完后再emit，异步函数是在then/catch里emit

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

@Component
export default class YourComponent extends Vue {
    count: number = 0
    @Emit()
    addToCount(n:number) {
        this.count += n
    }
    
    @Emit('reset')
    resetCount() {
        this.count = 0
    }
    
    @Emit()
    returnValue() {
        return 10
    }
    
    @Emit()
    onInputChange(e) {
        return e.target.value
    }
    
    @Emit()
    promise() {
        return new Promise((resolve) => {
            setTimeout(() => {
                resolve(20)
            }, 0)
        })
    }
}
// 以上会解析为：
export default {
    data() {
        return {
            count: 0
        }
    },
    methods: {
      addToCount(n) {
          this.count += n
          this.$emit('add-to-count', n)
      },
      resetCount() {
          this.count = 0
          this.$emit('reset')
      },
      returnValue() {
          this.$emit('return-value', 10)
      },
      onInputChange() {
          this.$emit('on-input-change', e.target.value, e)      //先传return，后传参数
      },
      promise() {
          // 普通函数是执行完后再emit，异步函数是在then/catch里emit
          new Promise((resolve) => {
              setTimeout(() => {
                  resolve(20)
              }, 0)
          }).then((value) => {
              this.$emit('promise', value)
          })
      }
  }
}

Mixins

Mixins文件夹下 > Goods.vue
<script lang='ts'>
import { Vue, Component } from 'vue-property-decorator'
@Component
export default class Goods extends Vue {
  goodList = ['apple', 'tea', 'book', 'watch']
}
</script>


引入使用
import Goods from '../Mixins/Goods.vue'
import { Component, Mixins } from 'vue-property-decorator'

export default class Home extends Mixins(Goods) {   //多个mixin用逗号隔开  Mixins(Goods, Price)
   //就可以直接使用Goods中定义的变量了
}

vue内部的装饰器就这些：