vue3+ts 绑定props 默认值的方式:withDefaults

46 篇文章 2 订阅

withDefaults

作用是给defineProps绑定默认值的api

父组件

<template>
    <TsSample :msg='msg' @on-updated='onUpdated' title='title' @on-delete='onDelete'/> 
</template>

子组件

<template>
  <h1>ts sample</h1>
  <p>{{ msg }}</p>
</template>
第一种方式哦:分离模式
interface Props{
    msg?:(string|number|boolean),
     title?:string[]
 }
 withDefaults(defineProps<Props>(),{
    msg:'hello',
    title:()=>['one','two']
 })
第二种方式:组合模式
withDefaults(
  defineProps<{ msg?: (string | number | boolean), title?: string }>(),{
      msg:'hello vite',
      title:'默认标题'
  }
);
使用
//利用接口声明类型
interface testType {
  name: string;
  age: number;
}
const props = withDefaults(
  defineProps<{
    text: testType;
  }>(),
  {
    text: {
      name: "flying_dark_feather",
      age: 20,
    },
  }
);
//但是在使用的时候需要利用传参的形式传递实际数据,否则会被识别成字符串而报错
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值