Vue.js子级向父级传递数据

组件之间的数据的传递 - 子传父

注意！！！：html对大小写不敏感，事件名字最好用-隔开或全部小写！！
步骤：

1、在父组件中在子组件上添加事件（自定义）监听

代表的含意：

事件分两类：

• 浏览器自带的事件 click mouseover mousedown …
• 自定义事件 nihao事件 xxx事件 yyyy事件 … 需要写代码让这个事件发生

上面的addmsg是在父组件中收到了子组件发布这个事件后，要做的事情，所以还要定义一个方法:

2、在子组件中,某一个时间通过this.$emit发出这个事件

在子组件，点击按钮之后，执行函数，在函数代码中，通过this.$emit方法向父组件发送这个事件。

此时，定义在父组件中的addmsg方法就会执行。如下：

效果如下：

3、this.$emit 格式

This.$emit(“事件名”,附加的数据)
这个附加的数据可以是任意的数据类型。如果你要传递多个数据 ，你就以对象的格式去传递，而不要选择再多写其它的参数。

对应地，在父组件，修改addmsg方法：

在addmsg中，已经可以接收这个数据了，所以我们就直接向父组件中的数据项进行push。

当todo改变了，vm会监听数据的变化，当数据变化了，它会重新刷新视图，如下：