vue-cli 使用vue-bus来全局控制的实例讲解


Posted in Javascript onSeptember 15, 2018

讲真,我写标题的时候不知道怎么写的好,之前写过一篇关于vue-bus的,不过是基础版本的,今天讲的是用脚手架来搭建的环境下的使用
与使用路由相似,我们需要先倒入这个vue-bus

指令如下:

npm install vue-bus

vue-cli 使用vue-bus来全局控制的实例讲解

导入成功后,我们就要去使用它,(还是参考路由)

我们在代码中写下:

<code class="language-html">import bus from "vue-bus" 
Vue.use(bus); 
 
</code>

是的,这跟路由很想,这点无需怀疑,接着我们可以参考下我上回的那个模板。依旧是三部曲,现在我们已经完成了部署环境这一步,接着是要去提交(emit方法)

this.$bus.$emit("password", this.password);

但是,这里要注意一点,就是作用域的问题,(es5写法下)。比如在下面代码中:

methods1: function(a) {
  console.log(a);
  var _this = this;
  //转化为base64,并且显示在页面上
  console.log(a.target.files[0]);
  var image = new Image();
  var reader = new FileReader();
  reader.readAsDataURL(a.target.files[0]);
  reader.onload = function(e) {
   console.log(e.target.result);
   _this.imglist[a.target.dataset.index].img = e.target.result;
  }
  },

上方代码是一段将file转化为base64的代码。其中,当我们在最外层使用this的时候,他的指向是我们想要的,包含这个组件的this,但是当我们在onload函数中使用this,那就嘻嘻了,所以这些由于自己不小心踏入的坑要避免

接着我们上去获取我们所要的信息,依旧是用on方法(相似的,如果是使用once方法。则是只有一次)

很多情况下,由于on方法是去监听,所以我们是要越早定义越好,所以基本都是在created中定义

created: function() {
  console.log(this.showinfo);
  var _this = this;
  this.$bus.$on("changes", function(a, b) {
  console.log(_this.showinfo);
  //this.showinfo[0].text="2017-00-00";
  _this.showinfo = [{ text: "生日", value: "2017-01-01" }, { text: "星座", value: "白羊座" }, { text: "职业", value: "IT" }]
  }, );
  _this.$bus.$on("showmyticket", function() { 
  _this.isshowbarrage_black=true;
  _this.isshowmyticket=true;
  });
 },

其中应该都注意到了,这里依旧是那个坑的问题,如果不这样做,我们在使用过后可能会出现这个现象

vue-cli 使用vue-bus来全局控制的实例讲解

这就是bug大的出生原因了,这时候我们就要考虑作用域的问题了

vue-cli 使用vue-bus来全局控制的实例讲解

基本就是这些。而且相对于vuex,vue-bus更简单,而且不会再局限于兄弟组件之间,而且在父子级别中也可以使用,但是请小心,因为他是监听状态,所以使用emit的时候要谨慎,当然,我也不强制要求你去销毁这个bus,希望大家都多去试试。

以上这篇vue-cli 使用vue-bus来全局控制的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
2014年50个程序员最适用的免费JQuery插件
Dec 15 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
Jan 09 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
Mar 02 Javascript
AngularJS过滤器filter用法总结
Dec 13 Javascript
jQuery密码强度验证控件使用详解
Jan 05 Javascript
jQuery实现导航回弹效果
Feb 27 Javascript
Vue按需加载的具体实现
Dec 02 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
Jan 17 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
Jan 19 Javascript
vue 使用async写数字动态加载效果案例
Jul 18 Javascript
JavaScript实现拖动对话框效果的实现代码
Oct 12 Javascript
JavaScript实现点击切换验证码及校验
Jan 10 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
Sep 15 #Javascript
对vue下点击事件传参和不传参的区别详解
Sep 15 #Javascript
vue-cli webpack 引入swiper的操作方法
Sep 15 #Javascript
swiper在vue项目中loop循环轮播失效的解决方法
Sep 15 #Javascript
解决vue中虚拟dom,无法实时更新的问题
Sep 15 #Javascript
js事件on动态绑定数据,绑定多个事件的方法
Sep 15 #Javascript
vue 的点击事件获取当前点击的元素方法
Sep 15 #Javascript
You might like
php多个文件及图片上传实例详解
2014/11/10 PHP
javascript 获取表单file全路径
2009/12/31 Javascript
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
jQuery+ajax实现顶一下,踩一下效果
2010/07/17 Javascript
jquery png 透明解决方案(推荐)
2010/08/21 Javascript
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
javascript学习(一)构建自己的JS库
2013/01/02 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
2013/02/16 Javascript
javascript Array 数组常用方法
2015/04/05 Javascript
JavaScript动态设置div的样式的方法
2015/12/26 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
JS模拟超市简易收银台小程序代码解析
2017/08/18 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
2018/01/11 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
js打开word文档预览操作示例【不是下载】
2019/05/23 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
原生JS实现天气预报
2020/06/16 Javascript
three.js显示中文字体与tween应用详析
2021/01/04 Javascript
[06:24]DOTA2 2015国际邀请赛中国区预选赛第二日TOP10
2015/05/27 DOTA
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
Python 使用SMTP发送邮件的代码小结
2016/09/21 Python
浅谈python中的实例方法、类方法和静态方法
2017/02/17 Python
Python三级菜单的实例
2017/09/13 Python
用python实现百度翻译的示例代码
2018/03/09 Python
十分钟搞定pandas(入门教程)
2019/06/21 Python
浅谈在JupyterNotebook下导入自己的模块的问题
2020/04/16 Python
tensorflow实现从.ckpt文件中读取任意变量
2020/05/26 Python
Python如何合并多个字典或映射
2020/07/24 Python
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
类如何去实现接口
2013/12/19 面试题
给老师的检讨书
2014/02/11 职场文书
护理学专业求职信
2014/06/29 职场文书
2015年财务部工作总结
2015/04/10 职场文书
导游词之广西漓江
2019/11/02 职场文书
分享五个Node.js开发的优秀实践 
2022/04/07 NodeJs