阅读数:90 评论数:0

一、概述

作用是给defineProps绑定默认值的

二、使用

父组件

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

子组件

<template>
  <h1>ts sample</h1>
  <p>{{ msg }}</p>
</template>

1、分离模式

interface Props{
    msg?:(string|number|boolean),
     title?:string[]
 }
 withDefaults(defineProps<Props>(),{
    msg:'hello',
    title:()=>['one','two']
 })

2、组合模式

withDefaults(
  defineProps<{ msg?: (string | number | boolean), title?: string }>(),{
      msg:'hello vite',
      title:'默认标题'
  }
);

3、常用方式

//利用接口声明类型
interface testType {
  name: string;
  age: number;
}
const props = withDefaults(
  defineProps<{
    text: testType;
  }>(),
  {
    text: {
      name: "flying_dark_feather",
      age: 20,
    },
  }
);
//但是在使用的时候需要利用传参的形式传递实际数据，否则会被识别成字符串而报错