这篇文章主要介绍了Vue2.0父组件与子组件之间的事件发射与接收实例代码,需要的朋友可以参考下

关于vue2.0的事件发射和接收,大家都知道$dispatch$broadcast在vue2.0已经被弃用了,取而代之的是更加方便快捷的方式,使用事件中心,组件通过它来互相通信,不管组件在哪一个层都可以通过实例化一个空Vue来实现。上案例: 

 

  这是自己写的一个小案例,功能就是点击子组件的加减按钮控制父组件的数量变化。原理就是子组件的加减按钮点击时分发事件,父组件接收事件。相信html和css的代码大家都没问题,这里不赘述,直接说js部分,首先在项目初始化时先给data添加名为eventHub的空Vue对象,作用是让任何组件都可以调用事件发射和接收的方法。代码如下:

  在点击加号按钮时向父组件派发事件:

  由于我写的json数据是两层的:

  所以两层循环把数据展示在页面上,要精确将某个食物的数量显示必须知道第一大类和这一大类下这个食物的索引值,在这里在html那里先把两个索引传进子组件,在分发事件时再和数量一起打包成对象发射给父组件。

  记得子组件要在props里对child,parent进行声明,接着是父组件对发射过来的countFunc进行接收:

  到了这个时候将子组件传过来的countFunc里的obj进行console.log(),你会发现父组件已经接收了一个对象:Object {count: 1, index: 0, parent: 0},也就是当我点击一下苹果的加号按钮时传过来count为1说明数量为1,parent索引为0说明是第一大类,index为0说明是第一大类下的苹果,至此已经实现了父子组件之间的事件发射和接收。

  完整代码如下:

1.父组件:


2.子组件:


总结

以上所述是小编给大家介绍的Vue2.0父组件与子组件之间的事件发射与接收,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对爱安网网站的支持!

最新资讯
蚂蚁旗下网贷公司融资200亿获通过

蚂蚁旗下网贷公司融资

上交所公司债券项目信息平台披露的信息显示,多个花呗、
“饭圈”文化入侵豆瓣 起底吸血豆瓣账号的黑产交易

“饭圈”文化入侵豆瓣

在这样的背景下,如果想人为干预评分、评论,就必须先“养
媒体:2021年5G毫米波模块需求利好台湾的供应商

媒体:2021年5G毫米波模

随着2021年5G毫米波智能手机AiP(封装天线)模块需求增长,
中概股阳光动力的泡沫:四天暴涨50% 故事有了新“套路”

中概股阳光动力的泡沫

阳光动力的真实经营状况难以为外界所知,叠加实控人彭小
华为将整合汽车和消费者业务 再度重申不造车

华为将整合汽车和消费

这意味着,汽车BU在华为公司的架构中平移到了另一个板块
走过爆发和冷却 动力电池再生产行业进入成熟发展期

走过爆发和冷却 动力

动力电池循环产业的发展进程并不全与新能源汽车发展的
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,