在vue
項目中使用typescript
需要引入一個庫 vue-property-decrator
,基于vue-class-component
庫而來,這個庫vue
官方推出來支持使用class
方式來開發(fā)vue
的單文件組件的庫
主要功能有:
- methods可以直接聲明為類的成員方法
- 計算屬性可以被聲明為類的屬性訪問器
- 初始化的data可以被聲明為類屬性
- data、render以及所有的Vue生命周期鉤子可以直接作為類的成員方法
- 所有其他屬性,需要放在裝飾器中
使用
vue-property-decorator 主要提供了多個裝飾器和一個函數(shù):
- @prop
- @propSync
- @Model
- @Watch
- @Proviede
- @Inject
- @ProvideReactive
- @InjectReactive
- @Emit
- @Ref
- @Component(由vue-class-component 提供)
- @Mixins(由vue-class-component 提供)
@Component
Component
裝飾器它注明了此類為一個Vue
組件,因此即使沒有設(shè)置選項也不能省略
如果需要定義比如name
,components
,filters
,directives
以及自定義屬性,就可以在Component
裝飾器中定義
import {Component,Vue} from 'vue-property-decorator';
import {componentA,componentB} from '@/components';
@Component({
components:{
componentA,
componentB,
},
directives: {
focus: {
// 指令的定義
inserted: function (el) {
el.focus()
}
}
}
})
export default class YourCompoent extends Vue{
}
computed,data,methods
這里取消組件的data和methods屬性,以往data返回對象中的屬性,methods中的方法需要直接定義在Class中,當(dāng)做類的屬性和方法
@Component
export default class HelloDecrator extends Vue {
count:number =123 //類屬性相當(dāng)于以前的 data
//類方法就是以前的方法
add():number{
this.count + 1
}
//獲取計算屬性
get total():number{
return this.count + 1
}
//設(shè)置計算屬性
set total(param:number):void{
this.count = param
}
}
@props
組件接收屬性的裝飾器,如下使用:
import {Component,Vue,Prop} from vue-property-decorator;
@Component
export default class YourComponent extends Vue {
@Prop(String)
propA:string;
@Prop([String,Number])
propB:string|number;
@Prop({
type:String,//type:[String,Number]
default:'default value',//一般為String或者Number
//如果對象或數(shù)組的話,默認(rèn)值從一個工廠函數(shù)中返回
//default:()=>{
// return ['a','b']
//}
required:true,
validator:(value)=>{
return [
'Inprocess',
'Settled'
].indexOf(value) !== -1
}
})
propC:string
}
@watch
實際就是Vue中的監(jiān)聽器
import { Vue, Component, Watch } from 'vue-property-decorator'
@Component
export default class YourComponent extends Vue {
@Watch('child')
onChildChanged(val: string, oldVal: string) {}
@Watch('person', { immediate: true, deep: true })
onPersonChanged1(val: Person, oldVal: Person) {}
@Watch('person')
onPersonChanged2(val: Person, oldVal: Person) {}
}
@emit
vue-property-decorator
提供的 @Emit
裝飾器就是代替Vue
中的事件的觸發(fā)$emit
import {Vue, Component, Emit} from 'vue-property-decorator';
@Component({})
export default class Some extends Vue{
mounted(){
this.$on('emit-todo', function(n) {
console.log(n)
})
this.emitTodo('world');
}
@Emit()
emitTodo(n: string){
console.log('hello');
}
}