本篇文章為大家展示了怎么在vue-cli中使用vue-bus實(shí)現(xiàn)全局控制，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

創(chuàng)新互聯(lián)主要從事成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)黎平,十載網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):13518219792

指令如下：

npm install vue-bus

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

我們?cè)诖a中寫(xiě)下：

import bus from "vue-bus" 
Vue.use(bus); 
 

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

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

但是，這里要注意一點(diǎn)，就是作用域的問(wèn)題，（es5寫(xiě)法下）。比如在下面代碼中：

methods1: function(a) {
  console.log(a);
  var _this = this;
  //轉(zhuǎn)化為base64,并且顯示在頁(yè)面上
  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)我們?cè)谧钔鈱邮褂胻his的時(shí)候，他的指向是我們想要的，包含這個(gè)組件的this，但是當(dāng)我們?cè)趏nload函數(shù)中使用this，那就嘻嘻了，所以這些由于自己不小心踏入的坑要避免

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

很多情況下，由于on方法是去監(jiān)聽(tīng)，所以我們是要越早定義越好，所以基本都是在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)該都注意到了，這里依舊是那個(gè)坑的問(wèn)題，如果不這樣做，我們?cè)谑褂眠^(guò)后可能會(huì)出現(xiàn)這個(gè)現(xiàn)象

這就是bug大的出生原因了，這時(shí)候我們就要考慮作用域的問(wèn)題了

上述內(nèi)容就是怎么在vue-cli中使用vue-bus實(shí)現(xiàn)全局控制，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

本文標(biāo)題：怎么在vue-cli中使用vue-bus實(shí)現(xiàn)全局控制-創(chuàng)新互聯(lián)
標(biāo)題網(wǎng)址：http://weahome.cn/article/dhhihd.html