Vue表单类的父子组件数据传递示例(2)

注意: 我在子组件里把 this.$emit('update:formData', this.form) 放在 mounted 当中的,其原因是为了避免在每个 input 标签的 input 事件中触发自定义事件,但这样写的前提是,父子组件都要共用一个对象。

这也就是上面代码中,父组件中使用 :formData.sync="form" 绑定值时,form 是一个对象,而子组件中的触发自定义事件 this.$emit('update:formData', this.form) ,this.form 也得是一个对象。

这里还需要注意的是,如果有多个子组件使用一个对象,那就要避免这种写法,因为一个组件修改了这个对象的数据,那么其它子组件也就都跟着改变了。

所以我在用的时候都是给每个子组件分配了一个自己的对象,比如:

data () { return { parentObject: { child_1_obj: {}, child_2_obj: {}, } } }

这是在父组件里定义的数据,当然名字不会这样取了。

结尾

也没什么说的了,对 Vue 还是处于使用的阶段,对其底层的东西了解还不够,我也好想读读源码,但总只是想想.....大家觉得有什么不妥的地方尽管说,大家相互交流交流。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/3fbf6c94942b9c4b45920de99deabd4c.html