登录
首页 >  文章 >  前端

Vue中Props默认值设置与对象数组处理避坑指南

时间：2026-05-21 16:38:55 416浏览 收藏

在Vue开发中，为Props设置默认值看似简单，却暗藏关键陷阱：对象和数组类型的默认值必须通过函数返回，否则多个组件实例将共享同一引用，引发难以排查的数据污染问题；而字符串、数字、布尔等基础类型则可直接赋值，安全又简洁。无论使用Options API还是Composition API（如defineProps），这一规则始终适用，搭配validator还能进一步提升数据健壮性——这个不复杂却极易被忽略的细节，正是写出稳定、可复用Vue组件的重要基石。

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 })
  }
})
 不复杂但容易忽略

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。

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