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

最新推荐文章于 2024-09-27 13:14:07 发布

bhegi_seg

最新推荐文章于 2024-09-27 13:14:07 发布

阅读量7.8k

点赞数

分类专栏：前端 html 文章标签： typescript javascript 前端

本文链接：https://blog.csdn.net/bhegi_seg/article/details/123369658

版权

前端同时被 2 个专栏收录

46 篇文章 15 订阅

订阅专栏

html

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