Vue笔记——子组件向父组件传递数据

Vue项目中经常使用到组件之间的数值传递，实现的方法很多，但是原理基本上大同小异。
子组件向父组件出传递数据，使用自定义事件的方式。
父组件向子组件传递数据，使用props属性的方式。
推荐文章：Vue笔记——父组件向子组件传递数据

一、在子组件中自定义事件

我们可以从子组件中想父组件中传递多个数据，在子组件中要做的工作只是，使用this.$emit()命令来自定义一个事件。该命令可以传递多个参数：

• 第一个参数是自定义事件的名字，是必须的
• 后面的参数是从子组件传递给父组件的数据，是可选的。要传递几个数据，就将这几个数据作为参数放进该命令中。

例如，我们要在子组件中自定义一个update事件，通过该事件向父组件传递两条数据，使用的代码如下：

this.$emit("update",this.passDate1,this.passDate2)

这里给出一个具体的实例：在子组件Child.vue中，定义了一个事件，子组件创建完成之后，向父组件传递链条数据。子组件Child.vue的完整代码如下：

二、在父组件中注册该事件，并绑定父组件中的方法，接收数据

在子组件中完成自定义事件之后，我们就可以在父组件中注册该事件，并绑定到父组件中的一个方法，在该方法中，接收子组件中传递过来的数据。父组件的完整代码如下：

三、实现效果