背景
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》 - 转载请注明出处,谢谢。