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
    评论
可以通过在组件使用`v-model`指令来实现双向数据绑定。在 Vue3 ,可以使用 TypeScript 类型来定义一个组件的 prop 和 data。 具体实现方法如下: 1. 在组件定义一个`username`的 prop,类型为`string`。 ``` props: { username: { type: String } }, ``` 2. 在组件定义一个 emit 事件,将组件内部的`username`状态改变时的值,通过该事件发送给父组件。 ``` methods: { updateUsername(event: Event) { this.$emit('update:username', (event.target as HTMLInputElement).value); } } ``` 3. 在模板使用`v-model`指令将组件内部的`username`状态和父组件传入的`username` prop 进行绑定。 ``` <template> <input type="text" v-model="username" @input="updateUsername"> </template> <script> import { defineComponent } from 'vue'; export default defineComponent({ props: { username: { type: String } }, methods: { updateUsername(event: Event) { this.$emit('update:username', (event.target as HTMLInputElement).value); } } }); </script> ``` 上述代码,当在父组件使用该组件时,可以通过`v-model`指令将组件内部的`username`状态和父组件的`username` prop 绑定起来。 例如: ``` <template> <div> <CustomInput v-model:username="username" /> <p>{{ username }}</p> </div> </template> <script> import { defineComponent, ref } from 'vue'; import CustomInput from './CustomInput.vue'; export default defineComponent({ components: { CustomInput }, setup() { const username = ref(''); return { username }; } }); </script> ``` 上述代码,当用户在 `CustomInput` 组件输入内容时,`username` 的值会同步更新,最终在父组件渲染出来。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值