VUE3+ts 实践记录

1.defineProps使用ts只能定义类型 ；withDefaults 既想定义类型和默认值使用withDefaults

其中 withDefaults 函数接受两个参数：

1. defineProps<{...}>()：用于定义组件的props类型。
2. 默认值对象：用于设置每个属性的默认值。

例如1：

import { withDefaults, defineProps } from 'vue';

const props = withDefaults(defineProps<{ message?: string; count?: number; }>(), {
  message: 'Hello, Vue 3!',
  count: 0
});

例如2

<script setup lang="ts">
// 可以理解为 Java 里的 类
type titleProps = {
  name: string;  // 规定了name的属性为string
};

// defineProps：用于定义组件的 props。当结合 TypeScript 时，则可以指定 props 的类型。例如，defineProps<titleProps>() 表示子组件期望接收一个 name 类型为 string 的 prop。
// withDefaults：Vue 3 语法，为 props 设置默认值。
const props = withDefaults(defineProps<titleProps>(), {
  name: "总览", // 如果父组件没有传递 `name` 的值，则使用默认值 "总览"
});
</script>