vue-property-decorator使用指南
Posted gxp69
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-property-decorator使用指南相关的知识,希望对你有一定的参考价值。
在Vue中使用TypeScript时,非常好用的一个库,使用装饰器来简化书写。
1、安装npm i -S vue-property-decorator
@Prop
@PropSync
@Provide
@Model
@Watch
@Inject
@Provide
@Emit
@Component
(provided by vue-class-component)Mixins
(the helper function namedmixins
provided by vue-class-component)
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)
其它详见文档
以上是关于vue-property-decorator使用指南的主要内容,如果未能解决你的问题,请参考以下文章
Vue 3 + vue-property-decorator 的“超级表达式必须为 null 或函数”
使用 vue-property-decorator 时注册本地组件
如何使用 ts 和 vue-property-decorator 热重载组件