vue中eventBus使用及注意事項

一、eventBus用途：用於解決：一個頁面調用另一個頁面中的方法。

二.、eventBus使用方法：分為三步驟,如A頁面調用B頁面中的方法。

 

1. 在main.js中將eventBus掛載到vue原型上

   Vue.prototype.$eventBus = new Vue()

    

2. 在A頁面點擊按鈕后執行

   <button @goDY()>執行</button>
   
   goDY(){
       let data = {
            a :1
       }
     this.$eventBus.$emit("getData",data)
   }

    

3. 在B頁面mounted中監聽

   mounted(){
     var that = this;
     this.$eventBus.$off("getData")
     this.$eventBus.$on("getData",function(data){
       console.log('監聽到變化',data)
       // 開始調用方法
       that.getList(data)

     })
   },
   methods:{
     getList(data){
        console.log('我就是B頁面的方法,你已經調用我了')
     }

   }
   
   

三、eventBus使用注意事項: 在$on綁定事件之前先使用$off解綁事項。

若不使用  this.$eventBus.$off("getData") 則頁面重新進入時,或造成內存泄漏,可以看到重新進入3次后,執行 this.$eventBus.$emit()該方法是,$on會多次綁定,重復監聽3次,所以在每次$on接收到事件之前先解綁事件($off)