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 相关文章推荐
jquery监控数据是否变化(修正版)
Apr 12 Javascript
jquery弹出关闭遮罩层实例
Aug 06 Javascript
邮箱下拉自动填充选择示例代码附图
Apr 03 Javascript
JS获取文件大小方法小结
Dec 08 Javascript
js创建对象的方法汇总
Jan 07 Javascript
js判断数组key是否存在(不用循环)的简单实例
Aug 03 Javascript
vue子父组件通信的实现代码
Jul 09 Javascript
微信小程序使用Socket的实例
Sep 19 Javascript
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 Javascript
JQuery的加载和选择器用法简单示例
May 13 jQuery
记录vue做微信自定义分享的一些问题
Sep 12 Javascript
JavaScript交换两个变量方法实例
Nov 25 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
一个简单的自动发送邮件系统(三)
2006/10/09 PHP
PHP 和 XML: 使用expat函数(三)
2006/10/09 PHP
PHP实现使用优酷土豆视频地址获取swf播放器分享地址
2014/06/05 PHP
PHP return语句的另一个作用
2014/07/30 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
newxtree.js代码
2007/03/13 Javascript
JavaScript 基于原型的对象(创建、调用)
2009/10/16 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
2013/07/04 Javascript
jquery 简单应用示例总结
2013/08/09 Javascript
JS实现不规则TAB选项卡效果代码
2015/09/16 Javascript
jquery跟随屏幕滚动效果的实现代码
2016/04/13 Javascript
获取select的value、text值的简单示例(jquery与javascript)
2016/12/07 Javascript
Angular 常用指令实例总结整理
2016/12/13 Javascript
ES6新增的math,Number方法
2017/08/06 Javascript
Js经典案例的实例代码
2018/05/10 Javascript
webpack4 SCSS提取和懒加载的示例
2018/09/03 Javascript
jQuery zTree树插件的使用教程
2019/08/16 jQuery
vue全屏事件开发详解
2020/06/17 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
python进程管理工具supervisor使用实例
2014/09/17 Python
mvc框架打造笔记之wsgi协议的优缺点以及接口实现
2018/08/01 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
Tensorflow中的降维函数tf.reduce_*使用总结
2020/04/20 Python
学习Python爬虫的几点建议
2020/08/05 Python
大二学生学习个人自我评价
2014/01/19 职场文书
服务之星获奖感言
2014/01/21 职场文书
大学生职业生涯规划书
2014/03/14 职场文书
降消项目实施方案
2014/03/30 职场文书
优秀班主任经验交流材料
2014/06/02 职场文书
北京奥运会口号
2014/06/21 职场文书
中华魂放飞梦想演讲稿
2014/08/26 职场文书
银行竞聘上岗演讲稿
2014/09/12 职场文书
医学检验专业自荐信
2014/09/18 职场文书
投资公司董事长岗位职责
2015/04/16 职场文书
vue中data改变后让视图同步更新的方法
2021/03/29 Vue.js