在vue中使用typescript时,非常好用的一个库,使用装饰器来简化书写。
@prop
@propsync
@provide
@model
@watch
@inject
@provide
@emit
@component
(provided by )mixins
(the helper function named mixins
provided by )即使没有组件也不能省略@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{ }
@prop(options: (propoptions | constructor[] | constructor) = {})
decoratorimport { 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 }
@emit(event?: string)
decoratorimport { 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) }) } }
@watch(path: string, options: watchoptions = {})
decoratorimport { 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) {} }
如对本文有疑问, 点击进行留言回复!!
轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑
vert实践五——Json?Protocol Buffer?FlatBuffers?
[基于tensorflow的人脸检测] 基于神经网络的人脸检测8——验证训练好的神经网络
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地
网友评论