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

資訊專欄INFORMATION COLUMN

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

yeyan1996 / 1768人閱讀

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

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

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

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

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

HomePage:

SecondPage:

頁面效果如圖：


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

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

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

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

最后，通過群里大佬給的資料（資料再此?。。。。K于實現了想要的效果

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

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

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

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

現將兩個頁面的部分代碼做如下修改：

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/94237.html

相關文章

  • vue 248+個知識點（面試題）為你保駕護航

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

    snowell 評論0 收藏0

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

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

    BicycleWarrior 評論0 收藏0

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

    摘要：主要是看這是從上個頁面傳來的數據這一行數據的輸出次數情況來判斷事件觸發次數?？偨Y所以，如果想要用來進行頁面組件之間的數據傳遞，需要注意亮點，組件事件應在生命周期內。其次，組件內的記得要銷毀。 轉載于簡書 原文鏈接：https://www.jianshu.com/p/fde...一開始的需求是這樣子的，我為了實現兩個頁面組件之間的數據傳遞，假設我有頁面A，點擊頁面A上的某一個按鈕之后，頁...

    CHENGKANG 評論0 收藏0

  • 「Vue實踐」武裝你的前端項目

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

    曹金海 評論0 收藏0

發表評論

0條評論

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