vue-property-decorator使用指南
程序员文章站
2022-03-07 10:10:17
在Vue中使用TypeScript时,非常好用的一个库,使用装饰器来简化书写。 1、安装npm i -S vue-property-decorator @Prop @PropSync @Provide @Model @Watch @Inject @Provide @Emit @Component ( ......
在vue中使用typescript时,非常好用的一个库,使用装饰器来简化书写。
1、安装npm i -s vue-property-decorator
@prop
@propsync
@provide
@model
@watch
@inject
@provide
@emit
-
@component
(provided by ) -
mixins
(the helper function namedmixins
provided by )
2、@component
即使没有组件也不能省略@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{ }
3、@prop 父子组件之间值的传递
@prop(options: (propoptions | constructor[] | constructor) = {})
decorator
import { vue, component, prop } from 'vue-property-decorator' @component export default class yourcomponent extends vue { @prop(number) readonly propa: number | undefined @prop({ default: 'default value' }) readonly propb!: string @prop([string, boolean]) readonly propc: string | boolean | undefined
}
注意title参数中的感叹号。如果需要设置为true或者有默认道具,我只使用它。如果没有,那么你应该使用| undefined。
“明确的赋值断言是一个特性,允许在实例属性和变量声明之后放置!以向typescript传递一个变量确实被分配用于所有意图和目的,即使typescript的分析无法检测到它。”
@componentexport default class mycomponent extends vue { @prop({ required: true }) title!: string @prop() optionalitem: string|undefined }
4、@emit
@emit(event?: string)
decorator
import { vue, component, emit } from 'vue-property-decorator' @component export default class yourcomponent extends vue { count = 0 @emit() addtocount(n: number) { this.count += n } @emit('reset') resetcount() { this.count = 0 } @emit() returnvalue() { return 10 } @emit() oninputchange(e) { return e.target.value } @emit() promise() { return new promise(resolve => { settimeout(() => { resolve(20) }, 0) }) } }
5、@watch
@watch(path: string, options: watchoptions = {})
decorator
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) {} }