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

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,
    },
  }
);
//但是在使用的时候需要利用传参的形式传递实际数据，否则会被识别成字符串而报错