Vue2将对象作为道具发送到组件为空或具有属性

Posted 2023-02-22

【中文标题】Vue2将对象作为道具发送到组件为空或具有属性

【英文标题】：Vue2 Sending Object as prop to component either empty or with properties

【发布时间】：2021-09-25 10:22:12

【问题描述】：

假设我们有两条路线：edit/1 和 edit/new

根容器（挂载时）检查是否存在this.$route.params.id，如果存在，则从API 中获取数据并填充obj。否则，有问题的 obj 仍然为空。

这个对象被发送到一个子组件，它有类似的东西：

<template>
  <input v-model="obj.name">
  <input v-model=obj.email">
</template>

<script>
export default 
  props: 
    obj 
      type: Object,
      default: () => 
    
  ,

</script>

我现在遇到的问题是，当我发送一个空对象时，没有任何渲染。这个问题与空对象有什么关系吗？据我所知，在 Vue 中可以像这样动态添加属性。

如果您需要更多信息，请询问！

【问题讨论】：

你确定当你发送一个填充的对象时可以正常工作吗？

是的，当我发送一个完整的对象时它可以工作！

顺便说一句，如果您使用 vuex，则不需要传递任意对象，imo props 应该特定于设置组件的选项，其他所有内容都应该像您的代码这样的任何类型的数据在店里

@LawrenceCherone 同意！不幸的是，在没有考虑商店的情况下设计了这个应用程序

【参考方案1】：

仅供参考

default: () => 

不会默认返回一个空对象。 箭头函数将返回 void。 如果您尝试将空对象设置为默认使用

default: () => ()

无论如何，不​​仅不鼓励 prop 突变，它们在 Vue2 中被认为是一种反模式（请参阅Vue 2 - Mutating props vue-warn），您应该添加一个数据字段，该字段要么已经声明了默认值，要么从相应的 prop 字段中获取其默认值

props: 
  obj: 
    type: Object,
    default: () => ( name: '', email: '' )
  

data() 
  return 
    name: this.obj.name,
    email: this.obj.email,
  

【讨论】：

我们可以在这里使用扩展运算符来浅拷贝obj吗？

data() return obj: ...this.someProp ; , 应该可以正常工作，但我不能保证

【参考方案2】：

问题是您需要在对象中声明 prop 成员，或者使用 Vue.set 从父级添加新的反应性属性。

default: () => (name:null, email:null)
// or
default: () =>  return name:null, email:null 

或在父级中

Vue.set(defaultObjWithoutMembers, 'name', 'foo')

Vue2 无法检测或跟踪不属于原始对象声明的属性。

见https://vuejs.org/v2/guide/reactivity.html

【讨论】：

但是 v-model 改变了 vue 中不允许的 prop

允许，但不鼓励。即便如此，使用 :value 和 @input('$emit'...) 更改也不会检测到新属性。

我正在使用:obj.sync="obj"，如果 obj 已满，它可以正常工作

@StevenSpungin 好的，您的 Vue.set 方法有效！但是，我想补充一点，并非所有属性都需要它。只有数组（在我的情况下）。你能解释一下原因吗？

运行 Vue2 的 javascript 运行时使用了一个代理，该代理只能跟踪它在最初扫描对象时看到的内容。因此，使用Vue.set 是一种解决方法，或者声明 null 或 undefined 道具。另请注意，我现在将您的默认函数放在( ) 中以返回一个对象，如 Braks 帖子中所述。顺便说一句，Vue3 没有这个问题。