一篇带你深入了解vue中的难懂概念 -- 子传父

vue中有父子传值这一概念，即包含父传子，还包括子传父，上篇我的文章中提到了父传子，这次一个案例带你了解比较难懂的子传父。

首先，我们根据效果图来分析这个案例实现的主要功能：

我们可以根据这幅图了解到，左边是子组件，右边是父组件，子组件中输入内容，转而父组件中同步显示子组件的内容，父组件使用子组件的内容，这个就是实现了子传父这个概念。

子传父的原理是事件传值，根据这一原理现在开始我们的代码梳理：

1.定义子组件及内容，子组件中要定义组件标签名，因为要传给父组件多个值，所以用对象的方式将数据包裹起来。

2.给最后一个表单注册键盘回车事件，触发绑定的事件，也就是这个按键按下之后，开启了子传父一系列的操作。

3.v-model，作用是接收表单的值，进行双向数据绑定。

4.vue中的this.$emit('事件名'，参数……)方法，这个是子传父的关键，子组件通过这里定义的事件名，绑定到组件标签上。

5.父组件根据这个事件名的属性值，然后在自己的实例中，定义属性值为事件名的函数，在函数里进行数据的传递。（十分关键）