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父组件里: ...
随机推荐
- 移动端html touch事件
诸如智能手机和平板电脑一类的移动设备通常会有一(capacitive touch-sensitivescreen),以捕捉用户的手指所做的交互.随着移动网络的发展,其能够支持越来越复杂的应用,web开 ...
- bzoj 1648: [Usaco2006 Dec]Cow Picnic 奶牛野餐【dfs】
从每个奶牛所在草场dfs,把沿途dfs到的草场的con都+1,最后符合条件的草场就是con==k的,扫一遍统计一下即可 #include<iostream> #include<cst ...
- js 事件循环机制 EventLoop
js 的非阻塞I/O 就是由事件循环机制实现的 众所周知 js是单线程的 也就是上一个任务完成后才能开始新的任务 那js碰到ajxa和定时器.promise这些异步任务怎么办那?这时候就出现了事件 ...
- deepin 安装maven
1.在官网 http://maven.apache.org/download.cgi 下载mvn包 2.新建mvn目录 mkdir /usr/local/mvn 把压缩包解压到mvn目录下面 修 ...
- java HashMap和LinkedHashMap区别
我们用的最多的是HashMap,在Map 中插入.删除和定位元素,HashMap 是最好的选择.但如果您要按自然顺序或自定义顺序遍历键,那么TreeMap会更好.如果需要输出的顺序和输入的相同,那么用 ...
- 生成自签名ca 证书 使nginx 支持https
创建服务器私钥,命令会让你输入一个口令:$ openssl genrsa -des3 -out server.key 1024创建签名请求的证书(CSR):$ openssl req -new -ke ...
- mysqladmin(MySQL管理工具)
mysqladmin是一个执行管理操作的客户端程序.它可以用来检查服务器的配置和当前状态.创建和删除数据库等. 1.mysqladmin命令的语法: shell > mysqladmin [op ...
- CircuitBreaker design pattern---reference
It's common for software systems to make remote calls to software running in different processes, pr ...
- 添加telnet命令
打开控制面板,打开程序和功能,看到左边有个“打开或关闭Windows功能 ,打开找到telnet客户端,把这2项都勾选上,然后确定就可以了 注意,如果只要telnet别人的话,就选telnet客户端. ...
- tensorboard在windows系统浏览器显示空白的解决
一个简单的using_tensorboard.py程序,如下: #using_tensorboard.py import tensorflow as tf a = tf.constant(10,nam ...