vue props default

Vue组件中的props可以设置默认值，通过`default`选项来实现。下面是一个示例：

Vue.component('my-component', {
  props: {
    message: {
      type: String,
      default: 'Hello' // 设置默认值为'Hello'
    }
  },
  template: '<div>{{ message }}</div>'
})

在上面的示例中，`my-component`组件定义了一个名为`message`的prop，并设置了默认值为'Hello'。如果父组件没有传递`message`属性给`my-component`组件，那么它将使用默认值进行渲染。

<my-component></my-component> <!-- 渲染结果为：Hello -->
<my-component message="Welcome"></my-component> <!-- 渲染结果为：Welcome -->

这里注意，如果父组件传递了`message`属性给`my-component`组件，那么默认值将被覆盖。

相关问题

vue props default类型

### Vue 中设置 Props 的默认类型

在 Vue 组件中定义 `props` 时，可以为其指定多种类型的默认值。这不仅限于基本的数据类型如字符串、数值和布尔值，还包括复杂对象和函数。

对于基础数据类型，默认值可以直接赋予：

{
  props: {
    testString: { type: String, default: 'default string' }[^4],
    testNumber: { type: Number, default: 0 },
    testBoolean: { type: Boolean, default: true }
  }
}

当涉及到更复杂的结构化数据类型比如数组或对象时，则需通过工厂函数来提供默认值，这是因为 JavaScript 对象和数组是引用类型，直接赋值可能导致多个实例共享同一个引用的问题:

{
  props: {
    testArray: { type: Array, default: () => [] },
    testObject: { type: Object, default: () => ({}) }
  }
}

此外，在 Vue 3 中还可以利用 Composition API 来声明带有默认值的属性，并且可以通过解构的方式简化访问这些属性的过程:

import { defineComponent, defineProps } from 'vue';

export default defineComponent({
  setup(props) {
    const localProps = defineProps({
      flag: { required: false, type: String, default: 'table' }[^3],
      name: { required: true, type: String }
    });

    return { ...localProps };
  },
});

值得注意的是，为了防止潜在错误的发生，建议总是为可选 prop 提供合理的默认值；而对于必需项则应明确指出其不可为空。

vue3 props default

在Vue 3中，props的默认值可以通过两种方式来设置：使用默认值函数或者使用默认值对象。

1. 使用默认值函数：
在Vue 3中，可以通过在props中定义一个函数来设置默认值。这个函数会在每次创建组件实例时被调用，并且返回一个默认值。例如：

   props: {
     count: {
       default: function() {
         return 0;
       }
     }
   }

在上面的例子中，count属性的默认值是一个函数，该函数返回0作为默认值。

2. 使用默认值对象：
在Vue 3中，还可以通过使用默认值对象来设置props的默认值。这个对象中的每个属性都会被当作对应props的默认值。例如：

   props: {
     count: {
       default: 0
     }
   }

在上面的例子中，count属性的默认值直接设置为0。

这两种方式都可以用来设置props的默认值，具体使用哪种方式取决于你的需求和个人偏好。