vue3 props默认值

在Vue 3中，有几种方式可以为props设置默认值。根据引用，当使用基于类型的声明式时，无法直接给props声明默认值。此时可以使用withDefaults编译宏来解决。通过使用withDefaults，你可以为props对象定义默认值。例如，你可以使用defineProps来定义props的类型，并在withDefaults中设置默认值。这样，在使用props时，如果没有传递相应的值，将使用默认值。例如：

import { defineProps, withDefaults } from 'vue';

interface Props {
  msg?: string;
  labels?: string[];
}

const props = withDefaults(defineProps<Props>(), {
  msg: 'hello',
  labels: () => ['one', 'two']
});

在上述代码中，我们定义了一个Props接口，包含了msg和labels两个可选属性。然后使用defineProps定义props的类型，并在withDefaults中设置了默认值。如果在使用props时没有传递相应的值，将使用默认值。

此外，根据引用，对于非泛型类型，你也可以直接在defineProps内部为props设置默认值。例如：

import { defineProps } from 'vue';

const props = defineProps({
  flag: {
    required: false,
    type: String,
    default: 'table'
  },
  name: {
    required: true,
    type: String
  }
});

在上述代码中，我们直接使用defineProps来定义props对象，并在内部设置了flag属性的默认值为'table'。如果在使用props时没有传递相应的值，将使用默认值。

总结起来，在Vue 3中，你可以使用withDefaults编译宏或直接在defineProps内部为props设置默认值来实现props的默认值设置。这样可以确保在使用props时，如果没有传递相应的值，将使用默认值。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [Vue3中props设置默认值](https://blog.csdn.net/yinmomoyin/article/details/130248574)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [vue3 +ts defineProps 设置默认值](https://blog.csdn.net/qq_42859450/article/details/127789933)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]