vue-cli 使用vue-bus来全局控制
来源:互联网 发布:淘宝小二误判如何申诉 编辑:程序博客网 时间:2024/06/09 14:55
讲真,我写标题的时候不知道怎么写的好,之前写过一篇关于vue-bus的,不过是基础版本的,今天讲的是用脚手架来搭建的环境下的使用
与使用路由相似,我们需要先倒入这个vue-bus
指令如下:
npm install vue-bus
导入成功后,我们就要去使用它,(还是参考路由)
我们在代码中写下:
import bus from "vue-bus"Vue.use(bus);是的,这跟路由很想,这点无需怀疑,接着我们可以参考下我上回的那个模板。依旧是三部曲,现在我们已经完成了部署环境这一步,接着是要去提交(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;});},其中应该都注意到了,这里依旧是那个坑的问题,如果不这样做,我们在使用过后可能会出现这个现象
这就是bug大的出生原因了,这时候我们就要考虑作用域的问题了
基本就是这些。而且相对于vuex,vue-bus更简单,而且不会再局限于兄弟组件之间,而且在父子级别中也可以使用,但是请小心,因为他是监听状态,所以使用emit的时候要谨慎,当然,我也不强制要求你去销毁这个bus,希望大家都多去试试
阅读全文
1 0
- vue-cli 使用vue-bus来全局控制
- 不全局安装vue-cli使用vue脚手架
- vue-cli 使用入门
- vue-cli使用总结
- vue-cli的使用
- 使用vue-cli脚手架
- vue-cli 使用axios
- 安装使用vue-cli
- vue-cli使用px2rem
- vue-cli webpack全局引入jquery
- 使用vue-cli脚手架搭建vue项目
- 使用vue-cli搭建vue项目完整版
- vue-cli webpack 使用sass
- 使用 vue-cli 搭建项目
- Vue-cli安装和使用
- 使用 vue-cli 搭建项目
- 使用 vue-cli 搭建项目
- vue-cli简单使用心得
- XYNUOJ 1096: 习题6-10 字符统计 输出结果为三行分别输出
- 解决nginx的The page you are looking for is temporarily unavailable错误办法
- JavaScript 通常用于操作 HTML 元素
- Linux驱动层调用应用层程序--call_usermodehelper()
- 找错:ZdalRuleCalculateException: 规则引擎计算出错,拆分值=
- vue-cli 使用vue-bus来全局控制
- Angular2是可怕的
- ES2016 新特性:求幂运算符(**)
- 字符串匹配的KMP算法
- 微信小程序配置服务器信息
- HMACSHA1加密
- 浙大版《C语言程序设计(第3版)》题目集前四章总结
- shell 脚本编程之引用
- java中如何调用Shell脚本文件