資訊專欄INFORMATION COLUMN
摘要：但是，不要高興的太早。。。。。，看看頁(yè)面上并不是顯示的我們傳過(guò)來(lái)的值。?！，F(xiàn)將兩個(gè)頁(yè)面的部分代碼做如下修改部分代碼部分代碼不知道你們了解這個(gè)的使用姿勢(shì)了嗎反正作為菜鳥(niǎo)的我是又學(xué)到了，歡迎留言說(shuō)說(shuō)你們?cè)陂_(kāi)發(fā)中遇到的一些值得卸載小本本上的問(wèn)題唄
本文首發(fā)在個(gè)人的博客上，地址：重慶崽兒Brand，歡迎訪問(wèn)~~~~
最近做公司項(xiàng)目遇到這樣一個(gè)需求：
從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面去選擇一些信息，選擇好后返回上一個(gè)頁(yè)面，并把選擇的信息帶過(guò)來(lái)
由于之前一直在工作中用的mui這個(gè)前端框架，框架自己封裝有實(shí)現(xiàn)這個(gè)需求的方法，所以實(shí)現(xiàn)就很簡(jiǎn)單，但是現(xiàn)在公司項(xiàng)目用的是Vue，首先想到的方法可能就是用localstorage或者Vuex來(lái)實(shí)現(xiàn)了，由于項(xiàng)目比較小，幾乎不會(huì)用到Vuex，如果只是這里用到的話，感覺(jué)Vuex不是特別合適，于是就pass掉了。localstorage又感覺(jué)逼格不夠高，于是也pass掉了，在群里和網(wǎng)上一番咨詢，于是準(zhǔn)備使用Vue官方也有推薦的一個(gè)非父子組件通信的方法：eventBusFirst、先準(zhǔn)備這樣兩個(gè)頁(yè)面：
HomePage:
首頁(yè) secondPage this HomePage {{msg}}
SecondPage:
首頁(yè)
secondPage
this secondPage
頁(yè)面效果如圖：
根據(jù)官方文檔（ 官方文檔地址 ），先在main.js文件中聲明一個(gè)全局的空的Vue實(shí)例：
window.Bus = new Vue();
然后修改HomePage和SecondPage兩個(gè)頁(yè)面的代碼，
最開(kāi)始我的寫(xiě)法如下：// HomePage
從控制臺(tái)可以看到，當(dāng)我們從SecondPage返回到HomePage的時(shí)候控制臺(tái)已經(jīng)打印出我們從SecondPage傳過(guò)來(lái)的值了。但是?。。。?/strong>，不要高興的太早。。。。。，看看頁(yè)面上?。?！并不是顯示的我們傳過(guò)來(lái)的值。。。而是初始值，這是什么情況?。。。?？？？
最后，通過(guò)群里大佬給的資料（資料再此！?。。。?，終于實(shí)現(xiàn)了想要的效果
資料中說(shuō)：因?yàn)関ue-router在切換時(shí)，先加載新的組件，等新的組件渲染好但是還沒(méi)掛在前，銷毀舊的組件，然后再掛載組件
在路由切換時(shí)，執(zhí)行的方法依次是：
新組件： beforeCreate 新組件： created 新組件： beforeMount 舊組件： beforeDestroy 舊組件： destroy 新組件： mounted
所以，新組件只要在舊組件beforeDestroy之前，$on事件就能成功接收到。
現(xiàn)將兩個(gè)頁(yè)面的部分代碼做如下修改：
// HomePage
歡迎留言說(shuō)說(shuō)你們?cè)趘ue開(kāi)發(fā)中遇到的一些值得卸載小本本上的問(wèn)題唄~~~
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/94237.html
摘要：要招一個(gè)會(huì)的開(kāi)發(fā)者作為面試官的你，你還會(huì)每次都只是問(wèn)這些老土的問(wèn)題嗎你對(duì)的理解是什么你知道什么是雙向綁定嗎你了解它的原理嗎說(shuō)說(shuō)的生命周期有哪些組件通訊有哪些你用過(guò)嗎作為面試者的你，在網(wǎng)上搜索下面試題及答案，看完后你是不是覺(jué)得自己掌握了武林秘 showImg(https://segmentfault.com/img/bVburrG?w=533&h=300); 要招一個(gè)會(huì)vue的開(kāi)發(fā)者： ...
摘要：一父組件通過(guò)的方式向子組件傳遞數(shù)據(jù)，而通過(guò)子組件可以向父組件通信。而且只讀，不可被修改，所有修改都會(huì)失效并警告。 之前寫(xiě)了一篇關(guān)于vue面試總結(jié)的文章, 有不少網(wǎng)友提出組件之間通信方式還有很多, 這篇文章便是專門(mén)總結(jié)組件之間通信的 vue是數(shù)據(jù)驅(qū)動(dòng)視圖更新的框架, 所以對(duì)于vue來(lái)說(shuō)組件間的數(shù)據(jù)通信非常重要，那么組件之間如何進(jìn)行數(shù)據(jù)通信的呢？首先我們需要知道在vue中組件之間存在什么樣...
摘要：主要是看這是從上個(gè)頁(yè)面?zhèn)鱽?lái)的數(shù)據(jù)這一行數(shù)據(jù)的輸出次數(shù)情況來(lái)判斷事件觸發(fā)次數(shù)。總結(jié)所以，如果想要用來(lái)進(jìn)行頁(yè)面組件之間的數(shù)據(jù)傳遞，需要注意亮點(diǎn)，組件事件應(yīng)在生命周期內(nèi)。其次，組件內(nèi)的記得要銷毀。 轉(zhuǎn)載于簡(jiǎn)書(shū) 原文鏈接：https://www.jianshu.com/p/fde...一開(kāi)始的需求是這樣子的，我為了實(shí)現(xiàn)兩個(gè)頁(yè)面組件之間的數(shù)據(jù)傳遞，假設(shè)我有頁(yè)面A，點(diǎn)擊頁(yè)面A上的某一個(gè)按鈕之后，頁(yè)...
摘要：所有的高階抽象組件是通過(guò)定義選項(xiàng)來(lái)聲明的。所以一般在生命周期或者中，需要用實(shí)例的方法清除可當(dāng)你有多個(gè)時(shí)，就需要重復(fù)性勞動(dòng)銷毀這件事兒。更多的配置請(qǐng)看雙端開(kāi)啟開(kāi)啟壓縮的好處是什么可以減小文件體積，傳輸速度更快。本文目錄 接口模塊處理 Vue組件動(dòng)態(tài)注冊(cè) 頁(yè)面性能調(diào)試：Hiper Vue高階組件封裝 性能優(yōu)化：eventBus封裝 webpack插件：真香 本文項(xiàng)目基于Vue-Cli3，想知...
閱讀 1320·2021-11-11 10:57
閱讀 3740·2021-09-07 10:10
閱讀 3455·2021-08-03 14:03
閱讀 3082·2019-08-30 13:45
閱讀 696·2019-08-29 11:19
閱讀 1052·2019-08-28 18:07
閱讀 3112·2019-08-26 13:55
閱讀 824·2019-08-26 12:17
