首页 > 语言 > JavaScript > 正文

详解vue-property-decorator使用手册

2024-05-06 15:36:24
字体:
来源:转载
供稿:网友

一,安装

npm i -s vue-property-decorator

二,用法

1,@Component(options:ComponentOptions = {})

@Component 装饰器可以接收一个对象作为参数,可以在对象中声明 components ,filters,directives 等未提供装饰器的选项

虽然也可以在 @Component 装饰器中声明 computed,watch 等,但并不推荐这么做,因为在访问 this 时,编译器会给出错误提示

import { Vue, Component } from 'vue-property-decorator'@Component({ filters: { toFixed: (num: number, fix: number = 2) => { return num.toFixed(fix) } }})export default class MyComponent extends Vue { public list: number[] = [0, 1, 2, 3, 4] get evenList() { return this.list.filter((item: number) => item % 2 === 0) }}

2,@Prop(options: (PropOptions | Constructor[] | Constructor) = {})

@Prop 装饰器接收一个参数,这个参数可以有三种写法:

Constructor ,例如 String,Number,Boolean 等,指定 prop 的类型; Constructor[] ,指定 prop 的可选类型; PropOptions ,可以使用以下选项: type,default,required,validator 。
import { Vue, Component, Prop } from 'vue-property-decorator'@Componentexport default class MyComponent extends Vue { @Prop(String) propA: string | undefined @Prop([String, Number]) propB!: string | number @Prop({ type: String, default: 'abc' }) propC!: string}

等同于下面的 js 写法

export default { props: { propA: { type: Number }, propB: { default: 'default value' }, propC: { type: [String, Boolean] } }}

注意:

属性的ts类型后面需要加上 undefined 类型;或者在属性名后面加上!,表示 非null 和 非undefined 的断言,否则编译器会给出错误提示; 指定默认值必须使用上面例子中的写法,如果直接在属性名后面赋值,会重写这个属性,并且会报错。

3,@PropSync(propName: string, options: (PropOptions | Constructor[] | Constructor) = {})

@PropSync 装饰器与 @prop 用法类似,二者的区别在于: @PropSync 装饰器接收两个参数: 

propName: string 表示父组件传递过来的属性名; 

options: Constructor | Constructor[] | PropOptions 与 @Prop 的第一个参数一致;

@PropSync 会生成一个新的计算属性。

import { Vue, Component, PropSync } from 'vue-property-decorator'@Componentexport default class MyComponent extends Vue { @PropSync('propA', { type: String, default: 'abc' }) syncedPropA!: string}

等同于下面的 js 写法

export default { props: { propA: { type: String, default: 'abc' } }, computed: { syncedPropA: { get() { return this.propA }, set(value) { this.$emit('update:propA', value) } } }}            
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选