记录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)
  }
}

原创说明

    原文作者:davidshi
    原文地址: https://segmentfault.com/a/1190000020139726
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞