你知道defineProps有多少种写法吗?

本文探讨了在Vue3.X项目中同事们使用的不同defineProps写法,包括非TS和TS版本,以及带有和不带默认值的情况,鼓励读者分享更多可能的写法。
摘要由CSDN通过智能技术生成

前言

你知道defineProps有多少种写法吗?

你知道犹大有多少种用法吗?

前言: 出于这篇文章的初心是因为,在一个Vue3.X项目中发现了不同同事写的内容,对于defineProps的写法千奇百怪
所以出于好奇,来小小整理一下大概还有多少种千奇百怪的写法。(如有丢失,请评论区补充~)

1.非TS写法

const props = defineProps({
  data: {
    type: String,
    default: ''
  },
  arr: {
    type: Array,
    default: ()=>[]
  },
})

2.不需要默认值的TS写法

const  props = defineProps<{
    data: string,
    arr:number[]
}>()

3.需要默认值的TS写法

需要注意的是 withDefaults 只在 ts 中有用

const props = withDefaults(defineProps<{
  data: string,
  arr: number[] 
}>(), {
  data: '我是默认值',
  arr: () => [23]
})

  • 6
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值