Vue2.0子同级组件之间数据交互方法


Posted in Javascript onFebruary 28, 2018

熟悉了Vue.js的同级组件之间通信,写此文章,以便记录。

Vue是一个轻量级的渐进式框架,对于它的一些特性和优点,请在官网上进行查看,不再赘述。

使用NPM及相关命令行工具初始化的Vue工程,目录结构如下

Vue2.0子同级组件之间数据交互方法

接着我们进入Demo,首先我们可以删除掉模板项目中src/components/Hello.vue,然后在App.vue中删除对于Hello子组件的注册和使用还有一些其他无关紧要的东西,此时的App.vue应为这样

Vue2.0子同级组件之间数据交互方法

一、我们先来创建中央事件总线,在src/assets/下创建一个eventBus.js,

内容如下(eventBus中我们只创建了一个新的Vue实例,以后它就承担起了组件之间通信的桥梁了,也就是中央事件总线。)

Vue2.0子同级组件之间数据交互方法

二、 创建一个firstChild组件,引入eventBus这个事件总线,接着添加一个按钮并绑定一个点击事件

Vue2.0子同级组件之间数据交互方法

1、我们在响应点击事件的sendMsg函数中用$emit触发了一个自定义的userDefinedEvent事件,并传递了一个字符串参数

2、$emit实例方法触发当前实例(这里的当前实例就是bus)上的事件,附加参数都会传给监听器回调。

三、 我们再创建一个secondChild组件,引入eventBus事件总线,并用一个p标签来显示传递过来的值

Vue2.0子同级组件之间数据交互方法

1、我们在mounted中,监听了userDefinedEvent,并把传递过来的字符串参数传递给了$on监听器的回调函数

2、mounted:是一个Vue生命周期中的钩子函数,简单点说就类似于jQuery的ready,Vue会在文档加载完毕后调用mounted函数。

3、$on:监听当前实例上的自定义事件(此处当前实例为bus)。事件可以由$emit触发,回调函数会接收所有传入事件触发函数($emit)的额外参数。

四、在父组件中,注册这两个组件,并添加这两个组件的标签

Vue2.0子同级组件之间数据交互方法

保存所有修改的文件,然后打开浏览器窗口,内容如下(css请自行处理)

Vue2.0子同级组件之间数据交互方法 

点击向组件传值按钮,我们可以看到传值成功

Vue2.0子同级组件之间数据交互方法 

总结:

1、创建一个事件总线,例如demo中的eventBus,用它作为通信桥梁

2、在需要传值的组件中用bus.$emit触发一个自定义事件,并传递参数

3、在需要接收数据的组件中用bus.$on监听自定义事件,并在回调函数中处理传递过来的参数

另外:

1、兄弟组件之间与父子组件之间的数据交互,两者相比较,兄弟组件之间的通信其实和子组件向父组件传值有些类似,其实他们的通信原理都是相同的,例如子向父传值也是$emit和$on的形式,只是没有eventBus,但若我们仔细想想,此时父组件其实就充当了bus这个事件总线的角色。

2、这种用一个Vue实例来作为中央事件总线来管理组件通信的方法只适用于通信需求简单一点的项目,对于更复杂的情况,Vue也有提供更复杂的状态管理模式Vuex来进行处理。

以上这篇Vue2.0子同级组件之间数据交互方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中length属性的探索
Jul 31 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
Mar 04 Javascript
ECMAScript6中Set/WeakSet详解
Jun 12 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
Aug 15 Javascript
基于Javascript倒计时效果
Dec 22 Javascript
javascript基础知识讲解
Jan 11 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
Feb 18 Javascript
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
关于react-router/react-router-dom v4 history不能访问问题的解决
Jan 08 Javascript
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
Sep 05 Javascript
vue或react项目生产环境去掉console.log的操作
Sep 02 Javascript
bootstrap table支持高度百分比的实例代码
Feb 28 #Javascript
vue 2.x 中axios 封装的get 和post方法
Feb 28 #Javascript
浅析node应用的timing-attack安全漏洞
Feb 28 #Javascript
vue组件传递对象中实现单向绑定的示例
Feb 28 #Javascript
在Vue组件中使用 TypeScript的方法
Feb 28 #Javascript
React组件中的this的具体使用
Feb 28 #Javascript
浅谈Vue网络请求之interceptors实际应用
Feb 28 #Javascript
You might like
phpmyadmin导入(import)文件限制的解决办法
2009/12/11 PHP
php stripslashes和addslashes的区别
2014/02/03 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
JS鼠标事件大全 推荐收藏
2011/11/01 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
2013/03/01 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
纯JS实现根据CSS的class选择DOM
2014/03/22 Javascript
JSON格式的键盘编码对照表
2015/01/29 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
2016/11/16 Javascript
Angularjs实现分页和分页算法的示例代码
2016/12/23 Javascript
微信小程序实现长按删除图片的示例
2018/05/18 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
2018/08/17 Javascript
Vue实现一个图片懒加载插件
2019/03/11 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
2019/11/04 Javascript
Vue中key的作用示例代码详解
2020/06/10 Javascript
[04:09]2014DOTA2国际邀请赛Ti西雅图 历届冠军相继出局 BBC综述今日比赛
2014/07/20 DOTA
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
下载python中Crypto库报错:ModuleNotFoundError: No module named ‘Crypto’的解决
2018/04/23 Python
深入浅析Python获取对象信息的函数type()、isinstance()、dir()
2018/09/17 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
Pytoch之torchvision.transforms图像变换实例
2019/12/30 Python
pytorch之inception_v3的实现案例
2020/01/06 Python
Python Pivot table透视表使用方法解析
2020/09/11 Python
CSS3弹性伸缩布局之box布局
2016/07/12 HTML / CSS
纯css3实现的鼠标悬停动画按钮
2014/12/23 HTML / CSS
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
企业项目策划书
2014/01/11 职场文书
退休感言
2014/01/28 职场文书
《最可爱的人》教学反思
2014/02/14 职场文书
房地产财务部员工岗位职责
2014/03/12 职场文书
2014年团员学习十八大思想汇报
2014/09/13 职场文书
针对吵架老公保证书
2015/05/08 职场文书
Python爬取科目四考试题库的方法实现
2021/03/30 Python