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 jQuery $.post $.ajax用法
Jul 09 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
Mar 10 Javascript
JavaScript设计模式经典之工厂模式
Feb 24 Javascript
JS模拟实现方法重载示例
Aug 03 Javascript
js获取浏览器和屏幕的各种宽度高度
Feb 22 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
Dec 19 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
Sep 29 Javascript
node中使用es6/7/8(支持性与性能)
Mar 28 Javascript
基于Vue SEO的四种方案(小结)
Jul 01 Javascript
微信小程序 checkbox使用实例解析
Sep 09 Javascript
Vue组件基础用法详解
Feb 05 Javascript
Vue 请求传公共参数的操作
Jul 31 Javascript
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常用字符函数实例小结
2016/12/29 PHP
PHP实现转盘抽奖算法分享
2020/04/15 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
2015/03/31 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
基于jquery步骤进度条源码分享
2015/11/12 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
js判断空对象的实例(超简单)
2016/07/26 Javascript
vue.js初学入门教程(2)
2016/11/07 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
js滚轮事件 js自定义滚动条的实现
2020/01/18 Javascript
Python入门及进阶笔记 Python 内置函数小结
2014/08/09 Python
Python中字符串的格式化方法小结
2016/05/03 Python
mac系统安装Python3初体验
2018/01/02 Python
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
使用WingPro 7 设置Python路径的方法
2019/07/24 Python
PYTHON实现SIGN签名的过程解析
2019/10/28 Python
Python 实现数组相减示例
2019/12/27 Python
python爬虫开发之使用Python爬虫库requests多线程抓取猫眼电影TOP100实例
2020/03/10 Python
Python基于Tkinter编写crc校验工具
2020/05/06 Python
python分布式爬虫中消息队列知识点详解
2020/11/26 Python
英国空调、除湿机和通风设备排名第一:Air Con Centre
2019/02/25 全球购物
德国消费电子产品购物网站:Guter Kauf
2020/09/15 全球购物
J2EE面试题集锦(附答案)
2013/08/16 面试题
40岁生日感言
2014/02/15 职场文书
党员干部承诺书范文
2014/03/25 职场文书
教师反腐倡廉演讲稿
2014/09/03 职场文书
四风对照检查材料范文
2014/09/27 职场文书
2014年党建工作汇报材料
2014/11/02 职场文书
关于拾金不昧的感谢信
2015/01/21 职场文书
人与自然的观后感
2015/06/18 职场文书
小学三年级班主任工作经验交流材料
2015/11/02 职场文书
如何利用map实现Nginx允许多个域名跨域
2021/03/31 Servers