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网页制作特殊效果用随机数
May 22 Javascript
基于jQuery的ajax功能实现web service的json转化
Aug 29 Javascript
学习ExtJS fit布局使用说明
Oct 08 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
May 21 Javascript
js显示时间 js显示最后修改时间
Jan 02 Javascript
js原生appendChild的bug解决心得分享
Jul 01 Javascript
JS弹出对话框实现方法(三种方式)
Dec 18 Javascript
ES2015 Symbol 一种绝不重复的值
Dec 25 Javascript
js模糊查询实例分享
Dec 26 Javascript
JS中Array数组学习总结
Jan 18 Javascript
Angular 4.x 路由快速入门学习
May 03 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
Dec 07 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
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
PHP设计模式之委托模式定义与用法简单示例
2018/08/13 PHP
PHP使用ajax的post方式下载excel文件简单示例
2019/08/06 PHP
bgsound 背景音乐 的一些常用方法及特殊用法小结
2010/05/11 Javascript
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
js select option对象小结
2013/12/20 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
javascript实现五星评价代码(源码下载)
2015/08/11 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
2016/03/21 Javascript
Select下拉框模糊查询功能实现代码
2016/07/22 Javascript
JavaScript仿微博发布信息案例
2016/11/16 Javascript
微信小程序button组件使用详解
2018/01/31 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
2018/04/01 Javascript
ES6数组与对象的解构赋值详解
2019/06/14 Javascript
JavaScript实现图片伪异步上传过程解析
2020/04/10 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
2020/11/09 Javascript
一个超级简单的python web程序
2014/09/11 Python
如何处理Python3.4 使用pymssql 乱码问题
2016/01/08 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
Python面向对象之Web静态服务器
2019/09/03 Python
python不使用for计算两组、多个矩形两两间的iou方式
2020/01/18 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
英国在线电子和小工具商店:TecoBuy
2018/10/06 全球购物
英国现代市场:ARKET
2019/04/10 全球购物
升旗仪式主持词
2014/03/19 职场文书
治理商业贿赂工作总结
2015/08/10 职场文书
创业计划书之少年玩具店
2019/09/05 职场文书
golang中切片copy复制和等号复制的区别介绍
2021/04/27 Golang
解决Pytorch半精度浮点型网络训练的问题
2021/05/24 Python