记录vuepropertydecorator用法

背景

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'@Componentexport default class App extends Vue {  get calAge (newVal, oldVal) {    return ((new Date()).getFullYear() - this.birthYear)  }}

watch

import { Vue, Component, Watch } from 'vue-property-decorator'@Componentexport 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》
• 转载请注明出处，谢谢。