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 相关文章推荐
JS 拼图游戏 面向对象,注释完整。
Jun 18 Javascript
jquery网页元素拖拽插件效果及实现
Aug 05 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
Mar 18 Javascript
jQuery Raty 一款不错的星级评分插件
Aug 24 Javascript
Angularjs 制作购物车功能实例代码
Sep 14 Javascript
最常见的左侧分类菜单栏jQuery实现代码
Nov 28 Javascript
canvas实现图像放大镜
Feb 06 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
使用ng-packagr打包Angular的方法示例
Sep 21 Javascript
JavaScript实现的开关灯泡点击切换特效示例
Jul 08 Javascript
JS事件流与事件处理程序实例分析
Aug 16 Javascript
vue项目配置sass及引入外部scss文件
Apr 14 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
有关JSON以及JSON在PHP中的应用
2010/04/09 PHP
php开发微信支付获取用户地址
2015/10/04 PHP
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
2014/11/04 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
2015/03/04 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
BOM之navigator对象和用户代理检测
2017/02/10 Javascript
基于JS脚本语言的基础语法详解
2017/07/22 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
2018/10/24 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
2020/07/17 Javascript
jquery实现异步文件上传ajaxfileupload.js
2020/10/23 jQuery
[03:12]TI9战队档案 - Virtus Pro
2019/08/20 DOTA
python下如何查询CS反恐精英的服务器信息
2017/01/17 Python
Python获取CPU、内存使用率以及网络使用状态代码
2018/02/08 Python
解决Ubuntu pip 安装 mysql-python包出错的问题
2018/06/11 Python
快速解决pandas.read_csv()乱码的问题
2018/06/15 Python
python3实现随机数
2018/06/25 Python
python的concat等多种用法详解
2018/11/28 Python
浅谈python中str字符串和unicode对象字符串的拼接问题
2018/12/04 Python
Python换行与不换行的输出实例
2020/02/19 Python
Python3 中sorted() 函数的用法
2020/03/24 Python
Python dict的常用方法示例代码
2020/06/23 Python
python实现人工蜂群算法
2020/09/18 Python
倩碧英国官网:Clinique英国
2018/08/10 全球购物
TheFork葡萄牙:欧洲领先的在线餐厅预订平台
2019/05/27 全球购物
上课打牌的检讨书
2014/02/15 职场文书
机关门卫的岗位职责
2014/04/29 职场文书
给校长的建议书200字
2014/05/16 职场文书
教育系统干部作风整顿心得体会
2014/09/09 职场文书
旷课检讨书范文
2015/01/27 职场文书
盘点2020年适合农村地区创业的项目
2019/10/16 职场文书
Redis性能监控的实现
2021/07/09 Redis
Python代码实现双链表
2022/05/25 Python
Python自动操作神器PyAutoGUI的使用教程
2022/06/16 Python