defineProps和withDefaults的区别和使用
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
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: "",
});