vue-cli 使用vue-bus來全局控制的實例講解

更新時間：2018年09月15日 10:46:44 作者：胡世林

今天小編就為大家分享一篇 vue-cli使用vue-bus來全局控制的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

講真，我寫標(biāo)題的時候不知道怎么寫的好，之前寫過一篇關(guān)于vue-bus的，不過是基礎(chǔ)版本的，今天講的是用腳手架來搭建的環(huán)境下的使用
與使用路由相似，我們需要先倒入這個vue-bus

指令如下：

npm install vue-bus

導(dǎo)入成功后，我們就要去使用它，（還是參考路由）

我們在代碼中寫下：

<code class="language-html">import bus from "vue-bus" 
Vue.use(bus); 
 
</code>

是的，這跟路由很想，這點無需懷疑，接著我們可以參考下我上回的那個模板。依舊是三部曲，現(xiàn)在我們已經(jīng)完成了部署環(huán)境這一步，接著是要去提交（emit方法）

this.$bus.$emit("password", this.password);

但是，這里要注意一點，就是作用域的問題，（es5寫法下）。比如在下面代碼中：

methods1: function(a) {
  console.log(a);
  var _this = this;
  //轉(zhuǎn)化為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轉(zhuǎn)化為base64的代碼。其中，當(dāng)我們在最外層使用this的時候，他的指向是我們想要的，包含這個組件的this，但是當(dāng)我們在onload函數(shù)中使用this，那就嘻嘻了，所以這些由于自己不小心踏入的坑要避免

接著我們上去獲取我們所要的信息，依舊是用on方法（相似的，如果是使用once方法。則是只有一次）

很多情況下，由于on方法是去監(jiān)聽，所以我們是要越早定義越好，所以基本都是在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: "職業(yè)", value: "IT" }]
  }, );
  _this.$bus.$on("showmyticket", function() { 
  _this.isshowbarrage_black=true;
  _this.isshowmyticket=true;
  });
 },

其中應(yīng)該都注意到了，這里依舊是那個坑的問題，如果不這樣做，我們在使用過后可能會出現(xiàn)這個現(xiàn)象