Vue踩坑日记:ElementUI中el-form表单组件与data里面双向绑定的表单失去联系的问题

前言:
el-form表单组件中放置的el-input是可以绑定表单中属性的，但是今天突然之间出现了如标题上的问题。

场景:

本来想把一个写好的表单对象传入到父组件，但是传过去后没反应，打印了一下发现对象内的东西是空的，打开vue-devtools(一个vue在浏览器里的插件)仔细看了下好像也没问题，在input框中输入相应的数据的话表单内的数据值也改变了，但是到了最后发现表单还是啥都没有，以为是ref重名了，更改了之后也发现不对劲，在度娘上发现是因为层次太多导致双向绑定出现了视图不更新的问题

解决方案:

data(){
return:{
ruleForm:{} //一般来说表单创建都是这个样子
}           //，但是即使是加上空属性名也会出现失去联系
}
//正确做法是在方法内获取到双向绑定的值然后使用$set给表单动态赋属性值
//小Tips(是Vue里面的$set方法哦，不是JS中的set方法)
this.$set(this.form,'name','王五')
  //$set方法参数分别为:(你的对象,对象属性的名字，对象的值)

按以上的方法做就大概能解决标题上的问题了，如果你还有问题欢迎在评论区进行讨论，如果你有更好的方法请不吝赐教。