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: "",
});

猜你喜欢

转载自blog.csdn.net/weixin_45441173/article/details/128753530