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销毁监听事件