登录
首页 >  文章 >  前端

Props 默认值设置及对象数组避坑指南

时间：2026-03-30 08:29:11 287浏览 收藏

Vue 中设置 Props 默认值看似简单，却暗藏关键陷阱：对象和数组必须通过函数返回新实例，否则多个组件会共享同一引用，引发难以排查的数据污染问题；而字符串、数字、布尔等基础类型则可直接赋值，安全又简洁。无论使用 Options API 还是 Composition API（如 defineProps），这一规则都必须严格遵守——看似微小的写法差异，实则是保障组件隔离性与稳定性的核心防线。

Vue组件通信中 Props 怎么设置默认值？处理对象和数组的避坑指南

Props 设置默认值要用 函数返回值，尤其对象和数组必须用函数包裹，否则多个组件实例会共享同一份引用，导致数据污染。

基础类型默认值写法（简单安全）

字符串、数字、布尔等基础类型可以直接写默认值：

props: {
  title: {
    type: String,
    default: '默认标题'
  },
  count: {
    type: Number,
    default: 0
  },
  isActive: {
    type: Boolean,
    default: false
  }
}

对象/数组必须用函数返回（关键避坑点）

如果直接写 default: {} 或 default: []，所有组件实例会共用同一个对象或数组引用。修改一个实例的 props，其他实例也会跟着变。

正确写法是用函数返回新对象或新数组：

props: {
  userInfo: {
    type: Object,
    default() {
      return {
        name: '',
        age: 0
      }
    }
  },
  tags: {
    type: Array,
    default() {
      return []
    }
  }
}

带校验的默认值处理（更健壮）

可以结合 validator 和函数式默认值，确保传入数据结构合规：

props: {
  config: {
    type: Object,
    default() {
      return {
        theme: 'light',
        showHeader: true
      }
    },
    validator(value) {
      return typeof value.theme === 'string' && 
             typeof value.showHeader === 'boolean'
    }
  }
}

在 setup 中使用时注意（Vue 3 Composition API）

即使用了 defineProps，对象/数组默认值仍需函数形式：

const props = defineProps({
  list: {
    type: Array,
    default: () => [] // 必须是箭头函数或普通函数
  },
  meta: {
    type: Object,
    default: () => ({ loading: false })
  }
})
 不复杂但容易忽略

以上就是《Props 默认值设置及对象数组避坑指南》的详细内容，更多关于的资料请关注golang学习网公众号！

资料下载
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>