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 相关文章推荐
JavaScript图片放大技术(放大镜)实现代码分享
Nov 14 Javascript
Javascript中的关键字和保留字整理
Oct 16 Javascript
js中unicode转码方法详解
Oct 09 Javascript
vue父子组件的数据传递示例
Mar 07 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
Jul 27 Javascript
vue axios同步请求解决方案
Sep 29 Javascript
Koa代理Http请求的示例代码
Oct 10 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
Nov 13 Javascript
如何制作一个Node命令行图像识别工具
Dec 12 Javascript
vue实现的网易云音乐在线播放和下载功能案例
Feb 18 Javascript
jQuery实现简单轮播图效果
Dec 27 jQuery
在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 getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
php学习笔记 PHP面向对象的程序设计
2011/06/13 PHP
php实现scws中文分词搜索的方法
2015/12/25 PHP
PHP 7安装调试工具Xdebug扩展的方法教程
2017/06/17 PHP
thinkPHP3.2.2框架行为扩展及demo示例
2018/06/19 PHP
php和js实现根据子网掩码和ip计算子网功能示例
2019/11/09 PHP
PHP生成随机密码4种方法及性能对比
2020/12/11 PHP
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
JS实现n秒后自动跳转的两种方法
2020/11/30 Javascript
JavaScript适配器模式详解
2017/10/19 Javascript
js前端导出Excel的方法
2017/11/01 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
2018/12/10 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
2019/04/02 Javascript
javascript异常处理实现原理详解
2020/02/17 Javascript
[35:29]Secret vs VG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
pycharm使用matplotlib.pyplot不显示图形的解决方法
2018/10/28 Python
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
python输出pdf文档的实例
2020/02/13 Python
Python-opencv实现红绿两色识别操作
2020/06/04 Python
Pycharm自带Git实现版本管理的方法步骤
2020/09/18 Python
python mock测试的示例
2020/10/19 Python
python 基于UDP协议套接字通信的实现
2021/01/22 Python
css3教程之倾斜页面
2014/01/27 HTML / CSS
Parfumdreams芬兰:购买香水和化妆品
2021/02/13 全球购物
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
小加工厂管理制度
2014/01/21 职场文书
国庆节文艺活动方案
2014/02/03 职场文书
能源工程专业应届生求职信
2014/03/01 职场文书
大学优秀班集体申报材料
2014/05/23 职场文书
在校大学生自我评价范文
2014/09/12 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书
2015年入党积极分子评语
2015/03/26 职场文书
中学教师读书笔记
2015/07/01 职场文书
董事长助理工作总结2015
2015/07/23 职场文书
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android