Vue事件總線vue-bus簡單使用

Vue事件總線vue-bus簡單使用

1. 引入vue-bus依賴

npm install vue-bus

2. main.js中注冊

import Vue from 'vue'
import VueBus from 'vue-bus'

Vue.use(VueBus)

3. 使用

1. 在想傳遞出去的組件中觸發事件：this.$bus.emit

   <script>
       export default{
           methods:{
               testBus(){
                   this.$bus.emit('foo',{message:'來自vue-bus的消息'})；
               }
           }
       }
   </script>
   

​

2. 在想要接收數據的頁面監聽事件：this.$bus.on

   <script>
    	export default{
           created(){
               this.$bus.on("foo",this.getMessage);
           },
           beforeDestory(){
               this.$bus.off("foo",this.getMessage);
           },
           methods:{
               getMessage(params){
                   console.log(params.message);
               }
           }
       }
   </script>
   

   注：

   • 監聽事件一般建議放在created周期函數中，確保能夠有效監聽。
   • 離開界面后，建議使用this.$bus.off銷毀監聽事件