您好,登錄后才能下訂單哦!
本篇文章為大家展示了怎么在vue-cli中使用vue-bus實(shí)現(xiàn)全局控制,內(nèi)容簡(jiǎn)明扼要并且容易理解,絕對(duì)能使你眼前一亮,通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。
指令如下:
npm install vue-bus
導(dǎo)入成功后,我們就要去使用它,(還是參考路由)
我們?cè)诖a中寫下:
<code class="language-html">import bus from "vue-bus" Vue.use(bus); </code>
是的,這跟路由很想,這點(diǎn)無(wú)需懷疑,接著我們可以參考下我上回的那個(gè)模板。依舊是三部曲,現(xiàn)在我們已經(jīng)完成了部署環(huán)境這一步,接著是要去提交(emit方法)
this.$bus.$emit("password", this.password);
但是,這里要注意一點(diǎn),就是作用域的問(wèn)題,(es5寫法下)。比如在下面代碼中:
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)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。