Vue3 中 defineProps 怎么设置默认值？

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

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

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

下面是一个简单的示例：

import { defineComponent, defineProps } from 'vue';

const MyComponent = defineComponent({
  props: {
    message: String
  },
  setup(props) {
    return { 
      // access props here
      msg: 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 values
    const props = defineProps({
      message: {
        type: String,
        default: 'Hello, liangyueqi!' // Default value
      }
    });

    return { 
      // access props here
      msg: props.message 
    };
  },
  template: `
    <div>
      {{ msg }}
    </div>
  `
});

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

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

const MyComponent = defineComponent({
  setup() {
    // Define props with dynamically calculated default value
    const props = defineProps({
      message: {
        type: String,
        default: () => {
          if (someCondition) {
            return 'Hello, Java轮子!';
          } else {
            return '良月柒!';
          }
        }
      }
    });

    return { 
      // access props here
      msg: props.message 
    };
  },
  template: `
    <div>
      {{ msg }}
    </div>
  `
});

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

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

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