记录vue-property-decorator用法

背景

vue-property-decorator

介绍

本篇博客

记录开发过程中的基础用法。

用法

引用组件

import { Vue, Component } from 'vue-property-decorator'
import HelloWorld from './HelloWorld.vue'

@Component({
  components: { HelloWorld }
})
export default class App extends Vue {

}

Props

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

@Component({
  components: { HelloWorld }
})
export default class App extends Vue {
  @Prop(String)
  name: string
  @Prop([Number, String])
  score: number | string
  @Prop({
    type: number,
    default: 18,
    required: true,
    validator: value => {
      return (value > 10 && value < 60)
    }
  })
  age: number
}

computed

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

@Component
export default class App extends Vue {
  get calAge (newVal, oldVal) {
    return ((new Date()).getFullYear() - this.birthYear)
  }
}

watch

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

@Component
export default class App extends Vue {
  @Watch('birthYear', { immediate: true, deep: true})
  onBirthYearChange (val: number, oldValue: number) {
    this.age = ( (new Date()).getFullYear() - val)
  }
}

原创说明

• 此篇文章记录实际项目开发中遇到的问题。
• 参考自：
  《npm:vue-property-decorator》
  《Github:vue-property-decorator》
• 转载请注明出处，谢谢。