Vue2 将对象作为 prop 发送到组件，可以是空的，也可以是具有属性的
2021-07-16
599
假设我们有两个路由：
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 中像这样动态添加属性。
如果您需要更多信息，请询问！
2个回答
仅供参考
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,
}
}
Braks
2021-07-16
问题是您需要在对象中声明 prop 成员，或者使用
Vue.set
从父级添加新的反应属性。
default: () => ({name:null, email:null})
// or
default: () => { return {name:null, email:null} }
或在父级中
Vue.set(defaultObjWithoutMembers, 'name', 'foo')
Vue2 无法检测或跟踪不属于原始对象声明的属性。
Steven Spungin
2021-07-16