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