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

tech2024-10-03  20

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

注意!!!: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会监听数据的变化,当数据变化了,它会重新刷新视图,如下:

最新回复(0)