Vue项目总结（5）-表单组件基础

表单数据处理是一个项目中的必不可少的内容，编写表单组件是完成复杂项目基础。本文深入整理了Vue制作表单组件的各个方面，为后续制作复杂表单组件打好基础。 处理简单数据类型 基本方法 Vue中用prop从父组件向子组件传递数据。 下面是一个简单的输入组件MyInput.vue，定义了属性message，并且通过v-model指令绑定到了html的input上。 我们在父组件HelloModel.vue中调用这个组件。 程序是可以运行的，但是当修改数据时（属性message的值已经发生变化），Vue会发出warn警告。 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "message" 而且父组件中的message并不会被修改，这是因为Vue的属性是单向绑定。 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。 警告的问题很好解决，把prop的赋值给组件的数据，并且将input绑定到这个数据上（这里在input上用v-model只是想说明v-model不能直接用于简单类型的属性）。 如何将修改传递回父组件？捕获input事件，发送给父组件，让父组件自己去去修改。 MyInput.vue添加向父组件发送事件的代码。 HelloModel.vue添加接收子组件事件的代码。 用v-model简化代码 既然原生的input可以用v-model实现双向绑定，那么MyInput组件是否也可以支持呢？父组件中使用的时候简化为： 其实是可以的，但是MyInput要做改造，生成新的Myinput2.vue文件。 生成新的HelloModel2.vue文件。 参考： 用.sync修饰符简化 不进行解释了，直接看代码MyInput3.vue和HelloModel.vue。 参考：https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-修饰符 补充说明 v-model和.sync能简化表单组件的代码，它们有什么区别吗？ v-model写起来更简洁，应为父组件不需要知道表单组件中的属性名（默认使用value）。但是，如果表单组件中有多个input，那么v-model就无法表示绑定关系，因为.sync要指定表单控件的属性名，就可以解决1对多的绑定问题。 使用v-model时还会碰到一个问题，组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。定义组件时可以用model 选项避免这样的冲突。 { model: { // 定义model prop: 'checked', // 绑定prop传递的值 event: 'change' // 定义触发事件名称 }, props: { checked: Boolean // 接受父组件传递的值 } } 参考：https://cn.vuejs.org/v2/guide/components-custom-events.html#自定义组件的-v-model 处理对象和数组 前面表单控件的属性都是简单类型，如果直接传递对象或数组会有什么不一样？先看看Vue官网文档里的一句话，然后看例子。 注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态。 传递引用 MyForm.vue实现一个简单的表单组件，输入姓名和年龄。 HelloModel.vue调用表单组件，传递对象。 我们在父子组件中都添加了watch，子组件中并没有抛出修改数据事件，当input中的数据发生变化时，父子组件中都可以监控到（父组件在前）。 这里有个问题：是否可以用v-model传递对象呢？我认为是可以的，但是其实没有意义，因为没有抛出修改事件数据就已经被修改了，v-model要解决问题已经不存在了。 不直接修改父组件数据 如果不希望直接修改父组件的数据怎么办？例如：需要对用户输入的数据进行检查，检查通过后再更改父组件的数据。解决办法是在组件中的控件不直接绑定传入的属性对象，而是创建一个组件内的数据进行绑定，检查通过后再将修改合并到父组件的对象中。 子组件MyForm2.vue 父组件HelloModel5.vue。 渲染函数（render） 当业务逻辑比较复杂时，我们用渲染函数render编写代码可能更有效，所以下面看看如何用render实现上面的这些功能。 简单类型 父组件不需要有任何变化，就不贴在这里了。参照之前的代码，就更容易理解render函数，其实它就是将template变成了javascript代码，Vue的build也是这么干的。这里稍微增加了一点逻辑，就是让这个组件同时支持v-model和sync两种方式。 参考：https://cn.vuejs.org/v2/api/#vm-listeners 对象和数组 从渲染函数的角度看，处理对象属性并没有什么特殊的地方。这里虽然只有两个属性，但是特意写成了循环的方式，是要示例一下v-for和v-if在render中的写法。 参考：https://cn.vuejs.org/v2/guide/render-function.html#v-if-和-v-for 总结 通过上面的例子把Vue中和表单处理相关的知识点都整理了一遍，解决一般性的问题应该是够用了。但是，表单处理是一个可以无限复杂的事情，会碰到各种各样的情况，细节非常多，还需不断尝试与研究。 本系列其他文章： Vue项目总结（1）-基本概念+Nodejs+VUE+VSCode Vue项目总结（2）-前端独立测试+VUE Vue项目总结（3）-前后端分离导致的跨域问题分析 Vue项目总结（4）-API+token处理流程

本文章由javascript技术分享原创和收集