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

使用Vue.js进行项目开发，那必然会使用基于组件的开发方式，这种方式的确给开发和维护带来的一定的便利性，但如果涉及到组件之间的数据与状态传递交互，就是一件麻烦事了，特别是面对有一大堆表单的页面。

在这里记录一下我平时常用的处理方式，这篇文章主要记录父子组件间的数据传递，非父子组件主要通过Vuex处理，这篇文章暂时不作说明。

与文档里给的方案一样，父组件向子组件传递数据主要通过 props，子组件向父组件传递数据主要通过触发器 $emit()，只是在用法上会有些不同。

1、传递基本类型数据

当子组件内容较少时，会直接传递基本类型数据，通常为String, Number, Boolean三种。

先看个例子：

<!-- 父组件 parent.vue --><template>  <div class="parent">    <h3>问卷调查</h3>    <child v-model="form.name"></child>    <div class="">      <p>姓名：{{form.name}}</p>    </div>  </div></template><script>  import child from './child.vue'  export default {    components: {      child    }，    data () {      return {        form: {          name: '请输入姓名'        }      }    }  }</script>

<!-- 子组件 child.vue --><template>  <div class="child">    <label>      姓名：<input type="text" :value="currentValue" @input="changeName">    </label>  </div></template><script>  export default {    props: {      // 这个 prop 属性必须是 valule，因为 v-model 展开所 v-bind 的就是 value      value: ''    },    methods: {      changeName (e) {        // 给input元素的 input 事件绑定一个方法 changeName         // 每次执行这个方法的时候都会触发自定义事件 input，并且把输入框的值传递进去。        this.$emit('input', e.target.value)      }    }  }</script>

给子组件的 input 事件绑定一个方法 changeName，每次执行这个方法的时候都会触发自定义事件 input，并且把输入框的值传递进去。

父组件通过 v-model 指令绑定一个值，来接收子组件传递过来的数据。但这样只是父组件响应子组件的数据，如果还要子组件响应父组件传递的数据，就需要给子组件定义一个props属性 value，并且这个属性必须是 value，不能写个其它单词。

v-model 其实就是一个语法糖，详情可以参考使用自定义事件的表单输入组件。

2、传递引用类型数据

当子组件里的内容比较多时，比如子组件有多个表单元素，如果还像上面那样给每个表单元素绑定值，那就要写很多重复代码了。所以这个时候通常传递的是一个对象，传值的基本原理不变，不过写法上会有些不同。