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 相关文章推荐
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
Feb 05 Javascript
javascript encodeURI和encodeURIComponent的比较
Apr 03 Javascript
js中 javascript:void(0) 用法详解
Aug 11 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
Jun 24 Javascript
Ajax与服务器(JSON)通信实例代码
Nov 05 Javascript
一个例子轻松学会Vue.js
Jan 02 Javascript
Node.Js生成比特币地址代码解析
Apr 21 Javascript
JavaScript继承的特性与实践应用深入详解
Dec 30 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
Sep 27 Javascript
微信小程序顶部导航栏可滑动并选中放大
Dec 05 Javascript
详解vue父子组件状态同步的最佳方式
Sep 10 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
Zerg建筑一览
2020/03/14 星际争霸
PHP cURL初始化和执行方法入门级代码
2015/05/28 PHP
如何在旧的PHP系统中使用PHP 5.3之后的库
2015/12/02 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
javascript 获取url参数和script标签中获取url参数函数代码
2010/01/22 Javascript
js中查找最近的共有祖先元素的实现代码
2010/12/30 Javascript
IE6下focus与blur错乱的解决方案
2011/07/31 Javascript
用JavaScript实现类似于ListBox功能示例代码
2014/03/09 Javascript
jQuery事件绑定on()与弹窗实现代码
2016/04/28 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
2017/01/13 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
前端页面文件拖拽上传模块js代码示例
2017/05/19 Javascript
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
zTree异步加载展开第一级节点的实现方法
2017/09/05 Javascript
mac中利用NVM管理不同node版本的方法详解
2017/11/08 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
2017/11/08 jQuery
详解webpack loader和plugin编写
2018/10/12 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
2020/10/29 Javascript
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
2018/04/18 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
英国的潮牌鞋履服饰商店:size?
2019/03/26 全球购物
蔻驰英国官网:COACH英国
2020/07/19 全球购物
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
幼儿园庆元旦主持词
2015/07/06 职场文书
幼儿园毕业典礼家长致辞
2015/07/29 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers
如何利用 CSS Overview 面板重构优化你的网站
2021/10/24 HTML / CSS
Java 在线考试云平台的实现
2021/11/23 Java/Android
《仙剑客栈2》第一弹正式宣传片公开 年内发售
2022/04/07 其他游戏
MySQL批量更新不同表中的数据
2022/05/11 MySQL