国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue中的EventBus使用時你有過這種情況嗎？？？？

yeyan1996 / 1761人閱讀

摘要：但是，不要高興的太早。。。。。，看看頁面上并不是顯示的我們傳過來的值。。。現(xiàn)將兩個頁面的部分代碼做如下修改部分代碼部分代碼不知道你們了解這個的使用姿勢了嗎反正作為菜鳥的我是又學(xué)到了，歡迎留言說說你們在開發(fā)中遇到的一些值得卸載小本本上的問題唄

本文首發(fā)在個人的博客上，地址：重慶崽兒Brand，歡迎訪問~~~~

最近做公司項目遇到這樣一個需求：

從一個頁面跳轉(zhuǎn)到另一個頁面去選擇一些信息，選擇好后返回上一個頁面，并把選擇的信息帶過來

由于之前一直在工作中用的mui這個前端框架，框架自己封裝有實(shí)現(xiàn)這個需求的方法，所以實(shí)現(xiàn)就很簡單，但是現(xiàn)在公司項目用的是Vue，首先想到的方法可能就是用localstorage或者Vuex來實(shí)現(xiàn)了，由于項目比較小，幾乎不會用到Vuex，如果只是這里用到的話，感覺Vuex不是特別合適，于是就pass掉了。localstorage又感覺逼格不夠高，于是也pass掉了，在群里和網(wǎng)上一番咨詢，于是準(zhǔn)備使用Vue官方也有推薦的一個非父子組件通信的方法：eventBus
First、先準(zhǔn)備這樣兩個頁面：

HomePage:

SecondPage:

頁面效果如圖：


Second、開始使用EventBus 
根據(jù)官方文檔（ 官方文檔地址 ），先在main.js文件中聲明一個全局的空的Vue實(shí)例：
window.Bus = new Vue();

然后修改HomePage和SecondPage兩個頁面的代碼，

最開始我的寫法如下：
HomePage部分代碼
// HomePage
SecondPage部分代碼
來看看控制臺的效果：

從控制臺可以看到，當(dāng)我們從SecondPage返回到HomePage的時候控制臺已經(jīng)打印出我們從SecondPage傳過來的值了。但是！！！！，不要高興的太早。。。。。，看看頁面上！！！并不是顯示的我們傳過來的值。。。而是初始值，這是什么情況！！！？？？？

最后，通過群里大佬給的資料（資料再此！！！！），終于實(shí)現(xiàn)了想要的效果

資料中說：因?yàn)関ue-router在切換時，先加載新的組件，等新的組件渲染好但是還沒掛在前，銷毀舊的組件，然后再掛載組件

在路由切換時，執(zhí)行的方法依次是：

新組件： beforeCreate
新組件： created
新組件： beforeMount
舊組件： beforeDestroy
舊組件： destroy
新組件： mounted

所以，新組件只要在舊組件beforeDestroy之前，$on事件就能成功接收到。

現(xiàn)將兩個頁面的部分代碼做如下修改：

HomePage部分代碼
// HomePage
SecondPage部分代碼
不知道你們了解這個EventBus的使用姿勢了嗎？反正作為Vue菜鳥的我是又學(xué)到了，

歡迎留言說說你們在vue開發(fā)中遇到的一些值得卸載小本本上的問題唄~~~

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/94237.html

相關(guān)文章

  • vue 248+個知識點(diǎn)（面試題）為你保駕護(hù)航

    摘要：要招一個會的開發(fā)者作為面試官的你，你還會每次都只是問這些老土的問題嗎你對的理解是什么你知道什么是雙向綁定嗎你了解它的原理嗎說說的生命周期有哪些組件通訊有哪些你用過嗎作為面試者的你，在網(wǎng)上搜索下面試題及答案，看完后你是不是覺得自己掌握了武林秘 showImg(https://segmentfault.com/img/bVburrG?w=533&h=300); 要招一個會vue的開發(fā)者： ...

    snowell 評論0 收藏0

  • vue中8種組件通信方式, 值得收藏!

    摘要：一父組件通過的方式向子組件傳遞數(shù)據(jù)，而通過子組件可以向父組件通信。而且只讀，不可被修改，所有修改都會失效并警告。 之前寫了一篇關(guān)于vue面試總結(jié)的文章, 有不少網(wǎng)友提出組件之間通信方式還有很多, 這篇文章便是專門總結(jié)組件之間通信的 vue是數(shù)據(jù)驅(qū)動視圖更新的框架, 所以對于vue來說組件間的數(shù)據(jù)通信非常重要，那么組件之間如何進(jìn)行數(shù)據(jù)通信的呢？首先我們需要知道在vue中組件之間存在什么樣...

    BicycleWarrior 評論0 收藏0

  • vue非父子組件通信中eventbus被多次觸發(fā)（vue中使用eventbus踩過的坑）

    摘要：主要是看這是從上個頁面?zhèn)鱽淼臄?shù)據(jù)這一行數(shù)據(jù)的輸出次數(shù)情況來判斷事件觸發(fā)次數(shù)。總結(jié)所以，如果想要用來進(jìn)行頁面組件之間的數(shù)據(jù)傳遞，需要注意亮點(diǎn)，組件事件應(yīng)在生命周期內(nèi)。其次，組件內(nèi)的記得要銷毀。 轉(zhuǎn)載于簡書 原文鏈接：https://www.jianshu.com/p/fde...一開始的需求是這樣子的，我為了實(shí)現(xiàn)兩個頁面組件之間的數(shù)據(jù)傳遞，假設(shè)我有頁面A，點(diǎn)擊頁面A上的某一個按鈕之后，頁...

    CHENGKANG 評論0 收藏0

  • 「Vue實(shí)踐」武裝你的前端項目

    摘要：所有的高階抽象組件是通過定義選項來聲明的。所以一般在生命周期或者中，需要用實(shí)例的方法清除可當(dāng)你有多個時，就需要重復(fù)性勞動銷毀這件事兒。更多的配置請看雙端開啟開啟壓縮的好處是什么可以減小文件體積，傳輸速度更快。本文目錄 接口模塊處理 Vue組件動態(tài)注冊 頁面性能調(diào)試：Hiper Vue高階組件封裝 性能優(yōu)化：eventBus封裝 webpack插件：真香 本文項目基于Vue-Cli3，想知...

    曹金海 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<