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

Question

假设我们有两个路由：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中动态添加。

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

Answer 1

问题是您需要在对象中声明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

Answer 2

只是为了记录在案

default: () => {}

不会将空对象作为默认值返回。arrow函数将返回void。如果您试图将空对象设置为默认使用

default: () => ({})

无论如何，由于不鼓励道具突变，它们在Vue2中被视为反模式（请参见Vue 2-突变道具Vue warn），因此您应该添加一个数据字段，该字段要么已声明默认值，要么从相应的道具字段中获取其默认值

props: {
  obj: {
    type: Object,
    default: () => ({ name: '', email: '' })
  }
}
data() {
  return {
    name: this.obj.name,
    email: this.obj.email,
  }
}