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 格式字符串的应用
Mar 29 Javascript
js中获取事件对象的方法小结
Mar 13 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
Apr 07 Javascript
js实现交换运动效果的方法
Apr 10 Javascript
JS实现评价的星星功能
Aug 20 Javascript
利用node实现一个批量重命名文件的函数
Dec 21 Javascript
Vue2.0结合webuploader实现文件分片上传功能
Mar 09 Javascript
Node错误处理笔记之挖坑系列教程
Jun 05 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
Oct 09 Javascript
angular 实现下拉列表组件的示例代码
Mar 09 Javascript
JS中如何轻松遍历对象属性的方式总结
Aug 06 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
Jun 05 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
双料怀旧--SHARP GF515的维护、修理和简单调试
2021/03/02 无线电
十天学会php之第三天
2006/10/09 PHP
改变Apache端口等配置修改方法
2008/06/05 PHP
PHP扩展开发入门教程
2015/02/26 PHP
php文件系统处理方法小结
2016/05/23 PHP
ThinkPHP框架中使用Memcached缓存数据的方法
2018/03/31 PHP
PHP __call()方法实现委托示例
2019/05/20 PHP
javascript Array.prototype.slice的使用示例
2013/11/14 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
2014/09/04 Javascript
node.js中的http.response.writeHead方法使用说明
2014/12/14 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
jquery实现树形菜单完整代码
2015/12/29 Javascript
JavaScript必看小技巧(必看)
2016/06/07 Javascript
jQuery表单插件ajaxForm实例详解
2017/01/17 Javascript
Require.js的基本用法详解
2017/07/03 Javascript
微信小程序实现图片懒加载的示例代码
2017/12/13 Javascript
layer弹出层全屏及关闭方法
2018/08/17 Javascript
JavaScript实现shuffle数组洗牌操作示例
2019/01/03 Javascript
详解JWT token心得与使用实例
2019/08/02 Javascript
[46:42]DOTA2-DPC中国联赛正赛 Aster vs Magma BO3 第二场 3月5日
2021/03/11 DOTA
如何用itertools解决无序排列组合的问题
2017/05/18 Python
Python开发微信公众平台的方法详解【基于weixin-knife】
2017/07/08 Python
详解python字节码
2018/02/07 Python
python读取文本中的坐标方法
2018/10/14 Python
pytorch对可变长度序列的处理方法详解
2018/12/08 Python
python3+selenium自动化测试框架详解
2019/03/17 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
印度首个本地在线平台:nearbuy
2019/03/28 全球购物
最新大学生自我评价
2013/09/24 职场文书
先进集体事迹材料
2014/02/17 职场文书
车间统计员岗位职责
2015/04/14 职场文书
基于go interface{}==nil 的几种坑及原理分析
2021/04/24 Golang
Python图像处理之图像拼接
2021/04/28 Python
MySQL下使用Inplace和Online方式创建索引的教程
2021/05/26 MySQL
MySQL CHAR和VARCHAR该如何选择
2021/05/31 MySQL
Python中request的基本使用解决乱码问题
2022/04/12 Python