vue2利用Bus.js如何实现非父子组件通信详解


Posted in Javascript onAugust 25, 2017

前言

大家应该都知道,vue2中废弃了$dispatch和$broadcast广播和分发事件的方法。父子组件中可以用props和$emit()。如何实现非父子组件间的通信,可以通过实例一个vue实例Bus作为媒介,要相互通信的兄弟组件之中,都引入Bus,然后通过分别调用Bus事件触发和监听来实现通信和参数传递。下面话不多说了,来一起看看详细的介绍吧。

Bus.js可以是这样

import Vue from 'vue'
export default new Vue()

在需要通信的组件都引入Bus.js

import Bus from '../common/js/bus.js'

添加一个button,点击后$emit一个事件

<button @click="toBus">子组件传给兄弟组件</button>

methods

methods: {
 toBus () {
  Bus.$emit('on', '来自兄弟组件')
 }
 }

另一个组件也import Bus.js 在钩子函数中监听on事件

import Bus from '../common/js/bus.js'
export default {
 data() {
  return {
  message: ''
  }
 },
 mounted() {
  Bus.$on('on', (msg) => {
   this.message = msg
  })
  }
 }

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript定时保存表单数据的代码
Mar 17 Javascript
JavaScript NaN和Infinity特殊值 [译]
Sep 20 Javascript
javascript结合canvas实现图片旋转效果
May 03 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
Jun 23 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
Dec 07 Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 Javascript
基于daterangepicker日历插件使用参数注意的问题
Aug 10 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
Apr 28 Javascript
element-ui上传一张图片后隐藏上传按钮功能
May 22 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
Jun 04 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
Apr 11 Javascript
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 Vue.js
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 #Javascript
在Js页面通过POST传递参数跳转到新页面详解
Aug 25 #Javascript
Vue上传组件vue Simple Uploader的用法示例
Aug 25 #Javascript
DVA框架统一处理所有页面的loading状态
Aug 25 #Javascript
基于JavaScript实现评论框展开和隐藏功能
Aug 25 #Javascript
js求数组中全部数字可拼接出的最大整数示例代码
Aug 25 #Javascript
Vue.js进行查询操作的实例详解
Aug 25 #Javascript
You might like
PHP把小数转成整数3种方法
2014/06/30 PHP
PHP实现文件上传下载实例
2016/10/18 PHP
Laravel validate error处理,ajax,json示例
2019/10/25 PHP
jquery组件使用中遇到的问题整理及解决
2014/02/21 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
2014/10/17 Javascript
js面向对象之静态方法和静态属性实例分析
2015/01/10 Javascript
JSON字符串转JSON对象
2015/07/31 Javascript
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
AngularJS入门教程引导程序
2016/08/18 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
JS实现给对象动态添加属性的方法
2017/01/05 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
2017/07/13 Javascript
详解如何构建一个Angular6的第三方npm包
2018/09/07 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
js 实现 list转换成tree的方法示例(数组到树)
2019/08/18 Javascript
[04:01]2014DOTA2国际邀请赛 TITAN告别Ohaiyo期望明年再战
2014/07/15 DOTA
Python实现身份证号码解析
2015/09/01 Python
Python中numpy模块常见用法demo实例小结
2019/03/16 Python
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
Django Rest framework解析器和渲染器详解
2019/07/25 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
css3媒体查询中device-width和width的区别详解
2020/03/27 HTML / CSS
小程序瀑布流解决左右两边高度差距过大的问题
2019/02/20 HTML / CSS
伦敦平价潮流珠宝首饰品牌:Astrid & Miyu
2016/10/10 全球购物
介绍java中初始化块的使用
2012/09/11 面试题
甜品店创业计划书
2014/09/21 职场文书
公务员年度考核评语
2014/12/31 职场文书
广告业务员岗位职责
2015/02/13 职场文书
2015年除四害工作总结
2015/07/23 职场文书
决心书格式及范文
2019/06/24 职场文书
使用nginx配置访问wgcloud的方法
2021/06/26 Servers
Python中异常处理用法
2021/11/27 Python