怎么在vue-cli中使用vue-bus实现全局控制

发布时间：2021-03-26 16:09:46 阅读：221 作者：Leah 栏目：web开发

Vue开发者专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

本篇文章为大家展示了怎么在vue-cli中使用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;
  });
 },