Javascript VueJS传递默认属性而不引用子组件

我偶然发现了这样一种情况：我想将一个道具传递给一个子组件，该子组件将是组件的

默认值，但只有在初始值为空时才会显示

父组件：



子组件

道具：{
价值：{
类型：字符串，
默认值：“”
},
默认值：{
类型：字符串，
默认值：“”
},
},
方法：{
发射模糊（e）{
如果（！this.value&&this.default）{
this.value=this.default
}
这是。$emit（'blur'））
},
输入（）{
此.$emit（'input'，此.$el.value）
}
}

因此，我试图实现的基本目标是，当组件加载将从
v-model
获取值时，它还将接收一个不应更改的
默认值，并且仅当
blur
上的实际值为空时才用作值

默认值
将具有
数据的初始值。某些内容
不应更改

我试图使用
JSON.parse（JSON.stringify（this.value））
摆脱引用，但它似乎也不起作用
 因此，如果我正确理解了您的问题，您需要这种行为：在
组件上发生
模糊事件时，如果输入值为空，则将该值设置为父级（通过道具）指定的默认值

首先，在组件中执行
this.value=…
是一个错误。您不能修改道具，道具只能将数据从父级传递到子级，通过道具传递的数据不是您可以直接从组件内部修改的

试着这样做：


Vue.component（'multi-line-input'{
模板：“”，
道具：{
价值：{
类型：字符串，
默认值：“”，
},
默认值：{
类型：字符串，
默认值：“”，
},
},
方法：{
onBlur（）{
如果（！this.value&&this.default）{
此.emit（'input'，此.default）；
}
},
输入（e）{
此.$emit（'input'，例如target.value）；
},
},
});
新Vue({
el:“#应用程序”，
数据：{
用户：null，
initialUser:null，
},
创建（）{
//假设我正在从某个API中提取这些数据
此用户={
姓名：“弗雷德”，
电邮:'fred@email.com',
地址：'123假街'，
};
//制作一份数据副本，以便分配
//每个输入的默认属性
this.initialUser=\ uu.cloneDeep（this.user）；
},
});

感谢您的回答和您的见解，没错，这是滥用（手动设置值），但问题是
Default
应该作为变量传递，该变量正好等于
value
的第一个值
Default
是一个道具，因此，如果您像这样绑定它，您可以将其设置为变量的值
：default=“overviewCopy.header”
，在我的示例中，为了简洁起见，我没有这样做。因为它们具有相同的引用，所以实际上不起作用，所以当您清空字段
value=''
时，如果您想这样做，那么您是对的，您不能将两个属性绑定到同一个变量，因为输入将更改两个属性，但您只希望
值
属性更改，而不希望
默认值
。在这种情况下，您可以（1）将一个不同的变量绑定到您给定的任何初始值的
default
，或者（2）完全去掉
default
prop，因为它不需要由父组件指定-子组件可以计算出它给出的初始值是多少，并使用它自己的本地状态来驱动该行为。因此，为什么我不推荐这种方法以及我最后的澄清：它将如何/何时更新自己的属性
默认值
状态？如果在组件创建时未设置该值，则除了可以像
：default=“initialValue”
那样绑定的
值之外，还应该维护另一个数据项，例如
initialValue
。在父组件中制作数据模型的深度副本，这样您就有了可以绑定到
default
prop的初始值的副本。