在 Vue3 中，我们经常需要使用 defineProps 来定义组件的属性，但是如何设置这些属性的默认值呢？

这是一个常见的问题，特别是在开发过程中，我们希望能够为组件的属性提供一些默认值，以便在未传递属性值时能够有一个良好的备选方案。在本文中，我将介绍如何在 Vue3 中使用defineProps 来设置默认值。

首先，让我们回顾一下 defineProps 的基本用法。defineProps 允许我们在组件中定义 props，并且可以指定它们的类型、默认值等属性。

下面是一个简单的示例：

import { defineComponent, defineProps } from 'vue';const MyComponent = defineComponent({props: {message: String},setup(props) {return { // access props heremsg: props.message };},template: `<div>{{ msg }}</div>`
});

在这个示例中，我们定义了一个名为 message 的 prop，其类型为 String。但是，如果调用该组件时未传递 message 属性，将会怎样呢？这时候，我们就需要设置默认值。

在 Vue3 中，我们可以通过在 defineProps 中为每个属性提供默认值来实现这一点。下面是一个示例：

import { defineComponent, defineProps } from 'vue';const MyComponent = defineComponent({setup() {// Define props with default valuesconst props = defineProps({message: {type: String,default: 'Hello, liangyueqi!' // Default value}});return { // access props heremsg: props.message };},template: `<div>{{ msg }}</div>`
});

在这个示例中，我们使用 defineProps 来定义组件的 props，并且为 message 属性提供了默认值 'Hello, World!'。这样，当调用该组件时，如果未传递 message 属性，组件将会显示默认的消息。

除了提供基本的默认值外，我们还可以使用函数来动态设置默认值。例如，如果我们希望默认消息基于某些条件而变化，我们可以这样做：

const MyComponent = defineComponent({setup() {// Define props with dynamically calculated default valueconst props = defineProps({message: {type: String,default: () => {if (someCondition) {return 'Hello, Java轮子!';} else {return '良月柒!';}}}});return { // access props heremsg: props.message };},template: `<div>{{ msg }}</div>`
});

在这个示例中，我们通过一个函数来动态计算默认值。根据条件 someCondition 的不同，我们返回不同的默认消息。

总的来说，Vue3 中的 defineProps 提供了灵活的方式来定义组件的属性，并且可以轻松设置默认值。通过设置默认值，我们可以确保即使用户未传递属性值，组件也能够正常工作，并且具备合理的默认行为。

不管做什么，只要坚持下去就会不一样！