亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue2使用eventbus踩坑解決

 更新時(shí)間：2023年06月30日 09:33:49   作者：Skywang  
這篇文章主要為大家介紹了vue2使用eventbus踩坑解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

vue組件非常常見(jiàn)的有父子組件通信，兄弟組件通信。而父子組件通信就很簡(jiǎn)單，父組件會(huì)通過(guò) props 向下傳數(shù)據(jù)給子組件，當(dāng)子組件有事情要告訴父組件時(shí)會(huì)通過(guò) $emit 事件告訴父組件。

而兩個(gè)毫不相關(guān)的界面通訊我們又可以用到vuex和今天要說(shuō)的eventbus，本文就對(duì)eventbus使用時(shí)遇到的問(wèn)題以及怎么處理做說(shuō)明，至于怎么使用就不過(guò)多贅述了。

問(wèn)題1：

頁(yè)面A使用emit為什么第一次進(jìn)入B的時(shí)候頁(yè)面B中的on事件沒(méi)有被觸發(fā)

這就涉及到vue的生命周期問(wèn)題了，如果A的emit方法寫(xiě)在了跳轉(zhuǎn)方法里這時(shí)候B界面其實(shí)還沒(méi)有創(chuàng)建，這時(shí)候通知是觸發(fā)不了B的on事件。

至于怎么解決問(wèn)題，其實(shí)看下面的圖片大家就清楚了。

所以，我們可以把A頁(yè)面組件中的emit事件寫(xiě)在beforeDestory中去。

因?yàn)檫@個(gè)時(shí)候，B頁(yè)面組件已經(jīng)被created了，也就是我們寫(xiě)的on事件已經(jīng)觸發(fā)了。

所以可以，在beforeDestory的時(shí)候，emit事件。

A界面

// 跳轉(zhuǎn)界面的方法
  editList (index, date, item) {
    //  點(diǎn)擊進(jìn)入編輯的頁(yè)面，需要傳遞的參數(shù)比較多。
      this.$router.replace({path: '/B'})
   }
// bus通知的方法
   beforeDestroy () {
      bus.$emit('get', { name:'A'})
   }

B界面

// bus通知的方法
   create() {
      bus.$on('get', (data)=>{
      })
   }

這個(gè)問(wèn)題就解決了

問(wèn)題2：

為什么后面再一次依次去觸發(fā)的時(shí)候會(huì)出現(xiàn)，每一次都會(huì)發(fā)現(xiàn)好像之前的on事件分發(fā)都沒(méi)有被撤銷(xiāo)一樣，導(dǎo)致每一次的事件觸發(fā)執(zhí)行越來(lái)越多。

  這就是因?yàn)閎us的on事件是不會(huì)自動(dòng)清楚銷(xiāo)毀的，需要我們手動(dòng)來(lái)銷(xiāo)毀。

// 在B組件頁(yè)面中添加以下語(yǔ)句，在組件beforeDestory的時(shí)候銷(xiāo)毀。
  beforeDestroy () {
    bus.$off('get', ()=>{})
  }

以上就是vue2使用eventbus踩坑解決的詳細(xì)內(nèi)容，更多關(guān)于vue2 eventbus踩坑的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論