vue-happy-bus

vue-happy-bus插件

 

1.介绍：我们在页面中使用中央事件总线的时候，随着页面路由的跳转事件会叠加，我们一般会在组件销毁的生命周期函数中使用 $off() 来销毁事件。但是我们的项目肯定避免不了使用组件缓存，那么这个时候组件的生命周期函数不会执行，又该怎么销毁，这里就是推荐该插件的原因，看一下具体使用吧

// 安装

npm i -D vue-happy-bus

// 在main.js中

import Bus from 'vue-happy-bus'

Vue.prototype.$Bus = Bus


// 在组件中使用

<script>

export default {

   data () {

        return {
            
            // 注意必须在data中注册这个事件，这样才能调用其中这个this指向vue原型
            Bus: this.$Bus(this)
        }    
    },

    methods: {
        
        // 点击之后发布事件
        fn () {
    
            this.$Bus.$emit('bus')
        }
    },

    mounted () {

        this.$Bus.$on('bus', () => {

            console.log('事件触发')
        })
    }
}

// 之后不用自己调用 $off() 来销毁，插件会自动帮助我们完成
</script>