Vue 中如何设置 props 的默认值？

推荐答案

在 Vue 中，可以通过在 props 对象中使用 default 属性来设置默认值。示例如下：

// www.javascriptcn.com code example
export default {
  props: {
    title: {
      type: String,
      default: 'Default Title'
    },
    count: {
      type: Number,
      default: 0
    },
    isActive: {
      type: Boolean,
      default: false
    },
    items: {
      type: Array,
      default: () => []
    },
    config: {
      type: Object,
      default: () => ({})
    }
  }
}

本题详细解读

1. 基本用法

在 Vue 组件中，props 用于接收父组件传递的数据。为了确保即使父组件没有传递某些 props，组件也能正常工作，可以为 props 设置默认值。

2. 默认值的类型

• 基本类型：如 String、Number、Boolean 等，可以直接使用字面量作为默认值。
• 引用类型：如 Array 和 Object，必须使用工厂函数返回默认值，以避免多个组件实例共享同一个引用对象。

3. 示例解析

• title 是一个字符串类型的 prop，默认值为 'Default Title'。
• count 是一个数字类型的 prop，默认值为 0。
• isActive 是一个布尔类型的 prop，默认值为 false。
• items 是一个数组类型的 prop，默认值为一个空数组，使用工厂函数 () => [] 返回。
• config 是一个对象类型的 prop，默认值为一个空对象，使用工厂函数 () => ({}) 返回。

4. 注意事项

• 如果 props 的类型是 Array 或 Object，必须使用工厂函数返回默认值，否则可能会导致多个组件实例共享同一个引用对象，引发意外的副作用。
• 默认值仅在父组件没有传递该 prop 时生效。如果父组件传递了 null 或 undefined，默认值也会生效。