当前位置:首页 > 日记 > 正文

Vue2.0父组件与子组件之间的事件发射与接收实例代码

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父组件与子组件之间的事件发射与接收,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

相关文章

ppt2010中如何快速删除所有动画ppt

ppt2010中如何快速删除所有动画ppt

删除,动画,步骤,方法,快速,  您在使用ppt2010过程中,如果编辑了很多动画效果,但是发现有些许问题,希望推倒重来,那么就需要清空所有动画效果。下面小编教你怎么做吧。希望对你有帮助!ppt2010中快速删除所有动画的步骤打开powerpoint2010编辑好…

React学习之事件绑定的几种方法对

React学习之事件绑定的几种方法对

学习,事件绑定,几种方法,电脑软件,React,前言本文主要给大家介绍了关于React事件绑定的几种方法对比的相关呢荣,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。React事件绑定由于类的方法默认不会绑定this,因此在调用的时候…

JavaScript实现焦点进入文本框内关

JavaScript实现焦点进入文本框内关

核心,文本框,输入法,代码,焦点,js实现焦点进入文本框内关闭输入法:imeMode要用到的东西: imeMode:xxx有四个参数active 代表输入法为中文inactive 代表输入法为英文auto 代表打开输入法 (默认)disable 代表关闭输入法<INPUT onfocus=" thi…

微信小程序 连续旋转动画(this.anim

微信小程序 连续旋转动画(this.anim

连续,旋转动画,详解,程序,电脑软件,微信小程序 连续旋转动画一、.js中封装旋转动画方法  添加animation属性data:{ animation:''" }  改变animation的值(官网提供角度范围是-180~180,但是我发现角度越大会一直旋转)onShow: funct…

Excel中图表坐标轴的数值怎么修改

Excel中图表坐标轴的数值怎么修改

图表,修改,坐标轴,数值,电脑软件,  在制作Excel表格时,通常会图表结合,帮助我们更清晰的理解,也能更精确的分析。但有时候需要改变坐标轴的数值时,应该用什么办法更好修改呢?以下是小编为您带来的关于Excel中图表坐标轴的数值修改,希望对您有…

excel代入公式的详细图解教程

excel代入公式的详细图解教程

代入,方法,教程,公式,详细,  Excel中经常需要使用到代入公式的技巧,这样更方便我们进行计算操作。代入公式其实并不难,还没有掌握这一方法的小伙伴,可以看看以下关于excel代入公式的方法,希望阅读过后对你有所启发!excel代入公式的方法代入公…

Bootstrap modal只加载一次数据的

Bootstrap modal只加载一次数据的

加载,推荐,数据,解决办法,电脑软件,1. Bootstrap 模态对话框和简单使用 <div id="myModal" class="modal hide fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">x</button> <h3>…

怎样对Excel2007表格中的值作出评

怎样对Excel2007表格中的值作出评

评价,表格,电脑软件,Excel,  对Excel中的值作出评价,简单地说,评价就是让数值变成汉字。还是不懂?没关系,以下是小编为您带来的关于对Excel表格中的值作出评价,希望对您有所帮助。对Excel表格中的值作出评价1 用Excel2007打开一篇工作表,并选…

WPS演示怎样制作倒计时效果WPS制作

WPS演示怎样制作倒计时效果WPS制作

方法,倒计时,效果,演示,电脑软件,  利用WPS演示制作一个提醒同学们上课的倒计时效果。下面是小编为大家整理的WPS演示制作倒计时效果的方法,希望大家能够从中有所收获!WPS演示制作倒计时效果的方法WPS演示制作倒计时效果的步骤1:启动WPS演…

20行JS代码实现网页刮刮乐效果

20行JS代码实现网页刮刮乐效果

代码实现,网页,效果,电脑软件,JS,分享一段用canvas和JS制作刮刮乐的代码,JS部分去掉注释不到20行代码效果如下盖伦.jpg刮刮乐.gifHTML部分<body> ![](img/gailun.jpg) <canvas id="canvas" width="400" height="300"></canvas> </bo…

最新下雨天心情一句话表达心情说说

最新下雨天心情一句话表达心情说说

下雨天,心情,句话,最新,雨天,  下雨天,心情也跟着惆怅,用一句话来表达下雨天的心情.今天小编带来精选下雨天心情个性签名 下雨天心情说说、下雨天心情好、心情不好的说说&hellip;&hellip; 欢迎大家阅读。===更多热门的下雨天说说、下雨天图…

微信小程序遇到修改数据后页面不渲

微信小程序遇到修改数据后页面不渲

数据,修改,页面,程序,电脑软件,微信小程序遇到修改数据后页面不渲染的问题解决前言:去年从小程序一开始出来到现在,我一直是比较看好和保持一定的关注度的,小程序的掀起的波浪我觉得一开始是在前端及其他技术开发人群中的,这是我第一次有意识的…