『VUE』报错解决 Props with type Object/Array must use a factory function to return the default value.

---

欢迎关注 『VUE』 专栏，持续更新中
欢迎关注 『VUE』 专栏，持续更新中

报错提示

Vue warn]: Invalid default value for prop "messageData": Props with type Object/Array must use a factory function to return the default value.

---

错因分析

• 这个错误提示是因为在 Vue 中，当你为 props 定义默认值时，如果 prop 的类型是 Object 或 Array，必须使用一个工厂函数来返回默认值，而不能直接传递一个对象或数组。

• 错误原因：
  在 Vue 中，如果你直接为 props 设置一个对象或数组作为默认值，Vue 会共享这个默认值实例。由于 Vue 的响应式机制会让多个组件共享这个对象或数组的引用，这可能会导致意外的副作用。

为了避免这种情况，Vue 要求你使用一个工厂函数来返回对象或数组的默认值。这样每个组件实例都会得到一个新的对象或数组。

• 解决方法：
  你需要将默认值从直接的对象或数组变成工厂函数（即返回对象或数组的函数）。

---

修改方法

• 错误的写法：

props: {
  messageData: {
    type: Object,
    default: {}  // 直接传递一个对象作为默认值
  }
}

正确的写法：

props: {
  messageData: {
    type: Object,
    default: () => ({})  // 使用工厂函数返回对象
  }
}

或者，如果 messageData 是一个数组：

props: {
  messageData: {
    type: Array,
    default: () => []  // 使用工厂函数返回数组
  }
}

default: () => {} 是一个工厂函数，它返回一个新的空对象 {}，这样每个组件实例都有自己的默认对象。
default: () => [] 适用于数组，返回一个新的空数组 []。
使用这种方式，Vue 会确保每个组件实例有独立的默认值，避免共享引用问题。

当你的 prop 类型是 Object 或 Array 时，必须使用工厂函数来返回默认值，而不能直接传递一个对象或数组字面量。

---

总结

大家喜欢的话，给个👍，点个关注！给大家分享更多计算机专业学生的求学之路！

版权声明：

发现你走远了@mzh原创作品，转载必须标注原文链接

Copyright 2024 mzh

Crated：2024-3-1

欢迎关注 『VUE』 专栏，持续更新中
欢迎关注 『VUE』 专栏，持续更新中
『未完待续』

---