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 相关文章推荐
JQuery的Validation插件中Remote验证的中文问题
Jul 26 Javascript
jQuery标签替换函数replaceWith()的使用例子
Aug 28 Javascript
JavaScript设置body高度为浏览器高度的方法
Feb 09 Javascript
JS代码实现根据时间变换页面背景效果
Jun 16 Javascript
Extjs 点击复选框在表格中增加相关信息行
Jul 12 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
Jan 30 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
详解angular如何调用HTML字符串的方法
Jun 30 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
Dec 03 Javascript
Element-UI+Vue模式使用总结
Jan 02 Javascript
微信小程序图片右边加两行文字的代码
Apr 23 Javascript
jquery实现上传图片功能
Jun 29 jQuery
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
php下关于中英数字混排的字符串分割问题
2010/04/06 PHP
xheditor与validate插件冲突的解决方案
2010/04/15 Javascript
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
node.js中的fs.mkdir方法使用说明
2014/12/17 Javascript
jQuery中的jQuery()方法用法分析
2014/12/27 Javascript
基于JavaScript代码实现随机漂浮图片广告
2016/01/05 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
2016/01/27 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
js带闹铃功能的倒计时代码
2016/09/29 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
2016/12/22 Javascript
Nodejs 发送Post请求功能(发短信验证码例子)
2017/02/09 NodeJs
jquery 校验中国身份证号码实例详解
2017/04/11 jQuery
详解Vue路由History mode模式中页面无法渲染的原因及解决
2017/09/28 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
2018/07/13 Javascript
layUI实现列表查询功能
2019/07/27 Javascript
Python机器学习之决策树算法实例详解
2017/12/06 Python
Python爬虫_城市公交、地铁站点和线路数据采集实例
2018/01/10 Python
python实现人像动漫化的示例代码
2020/05/17 Python
TensorFlow固化模型的实现操作
2020/05/26 Python
Python如何将字符串转换为日期
2020/07/31 Python
教你如何一步一步用Canvas写一个贪吃蛇
2018/10/22 HTML / CSS
澳大利亚鞋仓库:Shoe Warehouse
2019/07/25 全球购物
Ibatis中如何提高SQL Map的性能
2013/05/11 面试题
工厂厂长岗位职责
2013/11/08 职场文书
物业电工岗位职责
2013/11/20 职场文书
留学推荐信怎么写
2014/01/25 职场文书
幼儿园老师寄语
2014/04/03 职场文书
英语专业毕业生求职信
2014/05/24 职场文书
群众路线剖析材料怎么写
2014/10/09 职场文书
劳务派遣管理制度(样本)
2019/08/23 职场文书
html+css 实现简易导航栏功能
2021/04/07 HTML / CSS
Python绘画好看的星空图
2022/03/17 Python
3050和2060哪个好 性能差多少 差距有多大 谁更有性价比
2022/06/17 数码科技
windows系统安装配置nginx环境
2022/06/28 Servers