浅谈vue中$bus的使用和涉及到的问题


Posted in Javascript onJuly 28, 2020

Hello大家周末好,最近项目比较忙所以没有及时的更新抱歉,今天给大家讲一vue.bus。使用过的都知道$bus是兄弟之间相互传值的项目中说实话用的地方不算多但是也会用到(每一个领域都是会有坑的呀)。

1:创建$bus文件

创建一个文件内容如下:

import Vue from 'vue'

export default new Vue();

2:引入$bus

main.js: import Bus from './views/bus/bus';

Vue.prototype.$bus = Bus; //注意这里的Vue是我上面引入的vue import Vue from 'vue'

3:使用传值

this.$bus.$emit("vaPage",value); //很像父子之间传值的方法

4:接收

this.$bus.$on("vaPage", v =>{ //vaPage传的时候的key是什么接收就必须是什么
  console.log(v); //v是传来的值,可以接收多个参数
 })

5:填坑之路

大家假设一下一个场景现在有3个组件分别是A(父组件),B(子组件),C(子组件)

这时候B,C之间的通信就可以用$bus了,比如我在B中进行了操作然后要刷新自己和C组件的dom咱们就可以通过this.$bus.$emit(key,value); 然后C接受this.$bus.$on("key",v=>{});可以在这个组件调用方法什么的你在这里调用方法的时候会发现我只写了一次调用初始化的函数为啥会调用多少而且不刷新页面的时候越来越多,这是需要使用到咱们的生命周期函数beforDestroy在当前组件销毁的时候注销这个$bus的方法:beforDestroy(){this.$bus.$off("val")//关闭$Bus}.

6:总结

使用$bus的时候在接受bus的组件中别忘了再beforDestroy函数中销毁bus,不销毁的话会一直叠加的调用这个方法:

beforDestroy(){
   this.$bus.$off("vaPage"); //当这个组件销毁的时候bus也跟着一起销毁
  }

补充知识:vue-bus中央事件总线(兄弟组件之间传值)

1.作用:

非父子组件(例如兄弟组件)之间传值的方式,可以用vuex,也可以用事件总线,已下是事件总线(vue-bus)的介绍:

2、注册

在main.js中注册

import Vue from 'vue';
import VueBus from 'vue-bus';//中央事件总线
...
Vue.use(VueBus);
...

3、使用

A页面传递给B也页面:

A页面中,触发了一个叫toBPage的事件,并传递了参数'hello world!'

...
methods: {
 toBPage(){
 this.$bus.emit('bPage', 'hello world!');
 },
}
...

B页面中,this.$bus.on监听了bPage并传入了回调函数this.getBPage,该回调函数的参数就是传递过来的数据

created() {
 this.$bus.on('bPage', this.getBPage);
},
methods: {
 getBPage(item){
 console.log(item);//item就是传递过来的数据
 },
}

4.离开该页面时就无需再监听了,所以要销毁该监听事件,this.$bus.off就是销毁该监听事件

beforeDestroy() {
 this.$bus.off('bPage', this.getBPage);
},

以上这篇浅谈vue中$bus的使用和涉及到的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript DOM学习第四章 getElementByTagNames
Feb 19 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
Oct 09 Javascript
jQuery 阴影插件代码分享
Jan 09 Javascript
JavaScript中的作用域链和闭包
Jun 30 Javascript
动态加载js和css(外部文件)
Apr 17 Javascript
JS获取图片高度宽度的方法分享
Apr 17 Javascript
功能强大的jquery.validate表单验证插件
Nov 07 Javascript
javascript中Date对象的使用总结
Nov 21 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
Jan 13 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
微信小程序手机号码验证功能的实例代码
Aug 28 Javascript
layui表格内容溢出的解决方法
Sep 06 Javascript
js实现全选和全不选功能
Jul 28 #Javascript
JavaScript React如何修改默认端口号方法详解
Jul 28 #Javascript
vue内置组件component--通过is属性动态渲染组件操作
Jul 28 #Javascript
Postman如何实现参数化执行及断言处理
Jul 28 #Javascript
微信小程序实现电子签名功能
Jul 29 #Javascript
Vue的自定义组件不能使用click方法的解决
Jul 28 #Javascript
浅谈JavaScript中this的指向问题
Jul 28 #Javascript
You might like
php动态生成函数示例
2014/03/21 PHP
WIN8.1下搭建PHP5.6环境
2015/04/29 PHP
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
PHP中加速、缓存扩展的区别和作用详解(eAccelerator、memcached、xcache、APC )
2016/07/09 PHP
php mysql数据库操作类(实例讲解)
2017/08/06 PHP
走出JavaScript初学困境—js初学
2008/12/29 Javascript
JS实现点击链接取消跳转效果的方法
2014/01/24 Javascript
js 数值转换为3位逗号分隔的示例代码
2014/02/19 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
2016/01/22 Javascript
js利用appendChild对标签进行排序的实现方法
2016/10/16 Javascript
EditPlus中的正则表达式 实战(4)
2016/12/15 Javascript
bootstrap weebox 支持ajax的模态弹出框
2017/02/23 Javascript
详解Javascript几种跨域方式总结
2017/02/27 Javascript
bootstrap表单示例代码分享
2017/05/18 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
vue实现滑动超出指定距离回顶部功能
2019/07/31 Javascript
vue语法自动转typescript(解放双手)
2019/09/18 Javascript
js实现鼠标点击飘爱心效果
2020/08/19 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
微信小程序实现购物车小功能
2020/12/30 Javascript
[10:14]2018DOTA2国际邀请赛寻真——paiN Gaming不仅为自己而战
2018/08/14 DOTA
Python操作列表的常用方法分享
2014/02/13 Python
一步步教你用Python实现2048小游戏
2017/01/19 Python
python ddt实现数据驱动
2018/03/14 Python
python使用RNN实现文本分类
2018/05/24 Python
pycharm重命名文件的方法步骤
2019/07/29 Python
解决Django中调用keras的模型出现的问题
2019/08/07 Python
在Pytorch中使用样本权重(sample_weight)的正确方法
2019/08/17 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
纯CSS3打造属于自己的“小黄人”
2016/03/14 HTML / CSS
公司总经理工作职责管理办法
2014/02/28 职场文书
党员自我剖析材料
2014/08/31 职场文书
如何写贫困证明申请书
2014/10/29 职场文书
2015年度员工自我评价范文
2015/03/11 职场文书
辞职报告(范文三篇)
2019/08/27 职场文书