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


Posted in Javascript onSeptember 19, 2017

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

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

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

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

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

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

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

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

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

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

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

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

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

        完整代码如下:

1.父组件:

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

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

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

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

2.子组件:

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

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

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

总结

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

Javascript 相关文章推荐
一个js实现的所谓的滑动门
May 23 Javascript
简单的JS多重继承示例
Mar 13 Javascript
js相册效果代码(点击创建即可)
Apr 16 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
Mar 05 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
Nov 30 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
Dec 04 Javascript
JS Array.slice 截取数组的实现方法
Jan 02 Javascript
vue页面使用阿里oss上传功能的实例(二)
Aug 09 Javascript
node中实现删除目录的几种方法
Jun 24 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
jQuery 动画与停止动画效果实例详解
May 19 jQuery
ES6 async、await的基本使用方法示例
Jun 06 Javascript
详解ES6之async+await 同步/异步方案
Sep 19 #Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 #jQuery
jquery实现倒计时小应用
Sep 19 #jQuery
Angular客户端请求Rest服务跨域问题的解决方法
Sep 19 #Javascript
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 #jQuery
jQuery选择器之表单元素选择器详解
Sep 19 #jQuery
JS实现静态页面搜索并高亮显示功能完整示例
Sep 19 #Javascript
You might like
php二分法在IP地址查询中的应用
2008/08/12 PHP
php中大括号作用介绍
2012/03/22 PHP
php中运用http调用的GET和POST方法示例
2014/09/29 PHP
PHP将MySQL的查询结果转换为数组并用where拼接的示例
2016/05/13 PHP
php页面跳转session cookie丢失导致不能登录等问题的解决方法
2016/12/12 PHP
js中哈希表的几种用法总结
2014/01/28 Javascript
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
node+vue实现用户注册和头像上传的实例代码
2017/07/20 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
2017/08/31 Javascript
js定时器+简单的动画效果实例
2017/11/10 Javascript
JSON.stringify()方法讲解
2019/01/31 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
Emberjs 通过 axios 下载文件的方法
2019/09/03 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
python算法学习之计数排序实例
2013/12/18 Python
Linux中安装Python的交互式解释器IPython的教程
2016/06/13 Python
python实现机器人行走效果
2018/01/29 Python
numpy使用技巧之数组过滤实例代码
2018/02/03 Python
对python中的logger模块全面讲解
2018/04/28 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
对python读写文件去重、RE、set的使用详解
2018/12/11 Python
Python使用scipy模块实现一维卷积运算示例
2019/09/05 Python
美国滑雪和滑雪板商店:Buckman
2018/03/03 全球购物
英国大码女性时装零售商:Evans
2018/08/29 全球购物
Java语言程序设计测试题判断题部分
2013/01/06 面试题
优秀应届生推荐信
2013/11/09 职场文书
岗位竞聘书范文
2014/03/31 职场文书
网络编辑求职信
2014/04/30 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
公共场所禁烟倡议书
2014/08/30 职场文书
幼儿园开学家长寄语(2016春季)
2015/12/03 职场文书
《穷人》教学反思
2016/02/19 职场文书
好段摘抄大全(48句)
2019/08/08 职场文书
html+css 实现简易导航栏功能
2021/04/07 HTML / CSS