vue + ts 项目中Prop的用法

 要使vue支持ts写法,我们需要用到vue-property-decorator这个组件完全依赖于vue-class-componet

首先安装:

npm i -D vue-property-decorator

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

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

  • PropOptions ,包含以下选项:type(类型), required(必填), default(默认值), validator(验证函数)

  • Constructor[], 指定prop的可选类型;
  • Constructor,如StringNumberBooleanArrayObjectDateFunctionSymbol或自定义函数类型等,指定prop的类型

 如下面例子:

import { Vue, Component, Prop } from 'vue-property-decorator'

@Component
export default class Component extends Vue {
  // number类型
  @Prop(Number) readonly propA: number | undefined
  // 默认值为'default value'
  @Prop({ default: 'default value' }) readonly propB!: string
  @Prop([String, Boolean]) readonly propC: string | boolean | undefined
  @Prop({
        default: () => {
            return [];
        }
  })
  readonly propD: {}[]
}

注:属性的类型后面需要加上undefined 类型;或者在属性名后面加上!,表示非null 和 非undefined的断言,否则编译器会给出错误提示;

以上代码等同于:

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

参考资料: https://github.com/kaorun343/vue-property-decorator

  • 7
    点赞
  • 30
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值