Vue3使用withDefaults和defineProps设置默认值的操作指南

<script setup>
const props = defineProps({
    count: {type: Number,default: 0},
    name: {type: String,default: 'Guest'}
});
</script>

<script setup>
const props = defineProps({
    user: {type: Object,default: () => ({name: 'Guest',age: 18})}
});
</script>

<!-- Vue3 组件：TestProps.vue（无withDefaults） -->
<template>
  <div>
    <!-- 父组件没传props时，期望显示默认值，实际显示 undefined -->
    <h1>{{ title }}</h1>
    <p>计数：{{ count }}</p>
  </div>
</template>

<script setup lang="ts">
// 1. 定义props并设置默认值（通过第二个参数）
const props = defineProps<{
  title?: string;
  count?: number;
}>({
  title: {
    type: String,
    default: "默认标题"
  },
  count: {
    type: Number,
    default: 100
  }
});

// 2. 直接解构：丢失默认值（响应式可通过toRefs保留，但默认值不行）
const { title, count } = props; 
console.log(title); // undefined（而非 "默认标题"）
console.log(count); // undefined（而非 100）

// 3. 用toRefs解构：保留响应式，但仍丢失默认值
import { toRefs } from "vue";
const { title: refTitle, count: refCount } = toRefs(props);
console.log(refTitle.value); // undefined（依然没有默认值）
</script>

<script setup>
import { withDefaults } from 'vue';
const props = defineProps({count: Number,name: String});
withDefaults(props, {count: 0,name: 'Guest'});
</script>

 <script setup>
 import { withDefaults } from 'vue';
 const props = defineProps({user: Object});
 withDefaults(props, {user: () => ({name: 'Guest',age: 18})});
 </script>

<!-- Vue3 组件：TestProps.vue（用withDefaults） -->
<template>
  <div>
    <!-- 父组件没传props时，正确显示默认值 -->
    <h1>{{ title }}</h1> <!-- "默认标题" -->
    <p>计数：{{ count }}</p> <!-- 100 -->
  </div>
</template>

<script setup lang="ts">
// 1. 用withDefaults定义props：默认值与类型绑定
const props = withDefaults(defineProps<{
  title?: string; // 可选类型，配合默认值
  count?: number; // 可选类型，配合默认值
}>(), {
  // 定义默认值（会自动校验类型，不符合TS类型会报错）
  title: "默认标题", 
  count: () => 100, // 复杂类型（如对象/数组）需用函数返回（避免复用问题）
});

// 2. 直接解构：默认值生效，且响应式保留（因为withDefaults处理过）
const { title, count } = props; 
console.log(title); // "默认标题"（正确读取默认值）
console.log(count); // 100（正确读取默认值）

// 3. 父组件传值时，会覆盖默认值（符合预期）
// 若父组件调用：<TestProps title="新标题" count={200} />
// 此时解构后 title = "新标题"，count = 200
</script>

<script setup>
import { withDefaults, ref } from 'vue';
import i18n from './i18n';
const props = defineProps({
    buttonText: String
});
const currentLanguage = ref(i18n.getCurrentLanguage());
function generateDefaultButtonText() {
    return i18n.getTextForLanguage(currentLanguage.value, 'defaultButtonText');
}
withDefaults(props, {
    buttonText: generateDefaultButtonText
});
</script>

function setCommonDefaults(props) {
    withDefaults(props, {
        data: () => [],
        loading: false
    });
}

<script setup>
import { defineProps, withDefaults } from 'vue';
import { setCommonDefaults } from './commonDefaults';
const props = defineProps({
    data: Array,
    loading: Boolean
});
setCommonDefaults(props);
</script>