在Vue中,然后我们的一个表单,一般会给一个formdata的这样一个对象,来去装这个表单的各种项。但是如果说我们的表单数据比较多的话,我们要在formdata这个对象里面去显示声明,比如说姓名啊,年龄之类的,那这样子要写的这个属性就太多了,所以说很多时候就不想去写。然后直接v-model绑定这一个属性名,那一旦v-model的有值的时候,它会自己去调用一个Vue里面内置的set方法。将这一个数据绑定到这个Formdata对象上面去,同时他也有了一个被监听的功能
嗯,但是会出现一个问题,就是比如说我们的一个对象属性,它不是跟v-model绑定的啊,它是我们在业务当中要去添加的。那这个时候我们直接去添加成formdata下的某个属性,它其实是没有被Vue实时监听的一个能力,因为他没有调用这一个set方法,而是你直接用的最普通的对象添加对象.什么什么这种去添加的。嗯,这时候就会导致啊,表单上面不实时更新的一些bug,所以我们会建议调用VUe的一个API,就是$set这样子去做,那这个东西就被赋值了
那总结起来虽然说用$set这种方式会要多写一点代码,但相比起来。在对象里面显示的,去提前声明所有属性,它的代码量还是会更少的,所以说这个方法是值得的
嗯,说到代码量,其实我们在表单里面可能还会去,自定义一些很多的组件来做这一个表单的输入。这个时候,我们可能用常规的这种,就是由直组件派发事件去更新父组件的数据这种方法,那它的代码量又会很多,因为你要去写派发事件要写一个接收事件数据的函数。嗯,所以说我们可能也会考虑说,他能不能像v-model一样,就是直接就是进行一个子组件跟父组件的一个数据通信,嗯,在Vue2里面,它会有一个。sync的一个修饰符
这个修饰符是可以做到就是说,当这个父组件的一个数据更新了以后,它会实时的派发到一个子组件里面去。那子组件里面需要做的就是说去写一个watch监听一下这一个数据啊。如果说有的时候有数据更新了,那就把这个更新的数据再重新复制到子组件里面的业务当中去。然后当子组件里面需要向父组件派发的时候,可以写一个$emit然后加一个input的修饰符,去把这一个数据实时的派发到父组件里面去。那这样子就进行了一个双向的一个数据通信。但是这里面呢,也会涉及到一个bug
比如说,嗯,你想做一个重置功能啊,你在子组件里面,去向父组件派发一个事件,说我要重置数据了,那父组件就把他的数据给重置。但实际上,其实你的子组件数据依然没有重置,为什么?因为在你派发这个重置事件的时候,你并没有把最新的一个数据更新到父组件里面去,也就是说,你没有调用$emint Input, 那就导致这个父组件,它的数据是没有更新的,没有更新,他就没有办法去向子组件去进行一个数据的变化。所以说这个就是要考虑的问题
那解决的问题很简单,那就是在派发这个重置事件之前啊,把你的数据也派发给父组件,随便派发点什么,让父组件动一下,那么就可以达到这个实时更新的,就可以达到这个重置的目的。嗯,虽然说这些里面有一点坑,但他最终解决的目的还是减少代码量的开发
我因为这些偷懒的方法啊,遇到了很多的问题。嗯,虽然说这个问题解决起来挺难的,但是呢,我觉得能达到减少代码量开发的目的就是值得的。目前我又遇到了一个问题,就是我某一个数据。更新了,但是另外一个数据呢,他就消失了。我现在还没有想到,到底是因为什么原因影响到了他