defineProps和withDefaults的区别和使用

defineProps:要么设置默认值要么只设置参数的类型限制
withDefaults既可以设置默认值也可以设置参数类型
defineProps:

什么也不定义

<script setup>
import { defineProps, withDefaults } from "vue";const definepr =defineProps(["width","height"]);
console.log(definepr);</script>

定义类型和默认值

<script setup>
import { defineProps, withDefaults } from "vue";const definepr =defineProps({
  width:{
    type: String,default:"",},
  height:{
    type: String,default:"",},});
console.log(definepr.width)//200;</script>

defineProps使用ts(只能定义类型 ，既想定义类型和默认值使用withDefaults)

<script setup lang="ts">
import { defineProps, withDefaults } from "vue";
interface defi {
  width: String;
  height: String;}const definepr = defineProps<defi>();
console.log(definepr.width);//200;</script>

ts定义类型和默认值
withDefaults

interface prop {
  width: String | Number;
  height: String | Number;}const withdefau =withDefaults(defineProps<prop>(),{
  width:"",
  height:"",});