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.子组件:
如需转载请注明出处:http://www.cnblogs.com/zishang91/p/7551643.html,以便有错误可以及时修改,初涉Vue难免有错漏不足之处,请见谅并且指点,谢谢!!!
Vue2.0如何实现父组件与子组件之间的事件发射与接收的更多相关文章
- 插槽在父组件和子组件间的使用(vue3.0推荐)
子组件: 父组件: 插槽在父组件和子组件间的使用(vue3.0推荐):在外面加一个template模板
- Vue系列之 => 父组件向子组件传值
父组件向子组件传递数据 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta c ...
- Vue中父组件向子组件传值
Vue中父组件向子组件传值 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Vue父组件向子组件传递方法(自定义方法)并且子组件向父组件传递数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 父组件往子组件传递方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue-组件嵌套之——父组件向子组件传值
父组件向子组件传值步骤: 在这里先定义一下,相对本案例来说:App.vue是父组件,Second-module.vue是子组件. 一.首先,值肯定是定义在父组件中的,供所有子组件共享.所以要在父组件的 ...
- VUE 父组件与子组件交互
1. 概述 1.1 说明 在项目过程中,会有很多重复功能在多个页面中处理,此时则需要把这些重复的功能进行单独拎出,编写公用组件(控件)进行引用.在VUE中,组件是可复用的VUE实例,此时组件中的dat ...
- Vue父组件向子组件传递一个动态的值,子组件如何保持实时更新实时更新?
原文:https://blog.csdn.net/zhouweixue_vivi/article/details/78550738 2017年11月16日 14:22:50 zhouweixue_vi ...
- vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。
vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...
随机推荐
- 框架-Java:Spring Boot
ylbtech-框架-Java:Spring Boot 1.返回顶部 1. Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该 ...
- TI BLE:读本机地址
uint8 ownAddress[B_ADDR_LEN]; //B_ADDR_LEN=6GAPRole_GetParameter(GAPROLE_BD_ADDR, ownAddress); #def ...
- 使用WinSXS进行系统盘瘦身Windows 7/2008/10/2012不断变大的C盘(Windows 更新清理)
这是一款非常给力的国产良心小工具,用阿里云ECS的时候,一个C盘没多久就被坑爹的微软更新沉余文件塞满.此工具简单好用一下搞定! 操作系统: 所有 NT 6.X 内核的操作系统.比如 Windows V ...
- Kettle 连接 oracle 报错:could not be found, make sure the 'Oracle' driver (jar file) is installed.
我的ETL版本为6.0 oracle版本为11.2.0 报错如下: Driver class 'oracle.jdbc.driver.OracleDriver' could not be found, ...
- 聊聊LuaJIT
JIT 什么是JITJIT = Just In Time即时编译,是动态编译的一种形式,是一种优化虚拟机运行的技术. 程序运行通常有两种方式,一种是静态编译,一种是动态解释,即时编译混合了这二者.Ja ...
- 题解报告:hdu 1061 Rightmost Digit(快速幂取模)
Problem Description Given a positive integer N, you should output the most right digit of N^N. Input ...
- hbase优化小结
目录: 1,背景 2,GC 3,hbase cache 4,compaction 5,其他 1,背景 项目组中,hbase主要用来备份mysql数据库中的表.主要通过接入mysql binlog,经s ...
- 网站开发综合技术 三 JavaScript的DOM操作
第3部分 JavaScript的DOM操作 1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Windows对象操作 ...
- C#模拟百度登录并到指定网站评论回帖(三)
上次说到怎么获取BAIDUID,这个相信很多人都能够拿到就不多说了,今天一连说两个,获取token和raskey 2.利用以上获得的cookie直接访问页面 https://passport.baid ...
- bash 博弈
转载并修改自: http://www.cnblogs.com/wulangzhou/archive/2013/03/14/2959660.html 简单的取拿游戏一堆石子(或者其它的什么东西),下面是 ...