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 相关文章推荐
百度地图api应用标注地理位置信息(js版)
Feb 01 Javascript
js 中将多个逗号替换为一个逗号的代码
Jun 07 Javascript
EasyUI实现第二层弹出框的方法
Mar 01 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
Jan 12 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
Jun 07 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
Feb 24 Javascript
ECMAScript6 新特性范例大全
Mar 24 Javascript
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
利用webstrom调试Vue.js单页面程序的方法教程
Jun 06 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
微信小程序实现分享到朋友圈功能
Jul 19 Javascript
Vue实现剪切板图片压缩功能
Feb 04 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 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
简单的方法让你的后台登录更加安全(php中加session验证)
2012/08/22 PHP
PHP学习笔记(三):数据类型转换与常量介绍
2015/04/17 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
PHP仿微信多图片预览上传实例代码
2016/09/13 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
2010/08/03 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
2014/01/08 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
js如何改变文章的字体大小
2016/01/08 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
2017/12/24 jQuery
JS写谷歌浏览器chrome的外挂实例
2018/01/11 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
2018/09/21 Javascript
微信小程序实现跑马灯效果
2020/10/21 Javascript
在Vuex中Mutations修改状态操作
2020/07/24 Javascript
[06:07]辉夜杯现场观众互动 “比谁远送显示器”
2015/12/26 DOTA
对Python 文件夹遍历和文件查找的实例讲解
2018/04/26 Python
python爬虫URL重试机制的实现方法(python2.7以及python3.5)
2018/12/18 Python
python实现生成Word、docx文件的方法分析
2019/08/30 Python
详解python 中in 的 用法
2019/12/12 Python
python实现3D地图可视化
2020/03/25 Python
安装并免费使用Pycharm专业版(学生/教师)
2020/09/24 Python
html5唤起app的方法
2017/11/30 HTML / CSS
PHP解析URL是哪个函数?怎么用?
2013/05/09 面试题
国外软件测试工程师面试题
2016/12/09 面试题
成人高等教育毕业生自我鉴定
2013/10/22 职场文书
迎新晚会主持词
2014/03/24 职场文书
作文评语大全
2014/04/23 职场文书
感恩节活动策划方案
2014/05/16 职场文书
作风大整顿心得体会
2014/09/10 职场文书
婚礼长辈答谢词
2015/09/29 职场文书
Java循环队列与非循环队列的区别总结
2021/06/22 Java/Android
纯html+css实现Element loading效果
2021/08/02 HTML / CSS
css中有哪些方式可以隐藏页面元素及区别
2022/06/16 HTML / CSS