简易使用Vue中的中央事件总线(eventBus)

最新推荐文章于 2024-08-15 10:31:28 发布

treasure_zh

最新推荐文章于 2024-08-15 10:31:28 发布

阅读量1.5k

点赞数 1

本文链接：https://blog.csdn.net/u013493822/article/details/100541152

版权

本文介绍了在小型Vue项目中使用事件总线(eventBus)作为组件通信的一种方式，详细阐述了如何创建全局eventBus，以及如何避免因组件销毁未注销事件导致的重复执行问题。通过预定义事件类型和添加事件链管理，提高了代码的可维护性和错误检查能力。

摘要由CSDN通过智能技术生成

前言

正如我们所知Vue中组件的通信场景很多, 什么跨多级父子通信, 兄弟通信等等。各种各样的解决方法网上方法都有以及多得飞起, 我就不复制黏贴, 省点ATP。在Vue生态中已经有很好的方案解决各种疑难杂症的通信问题, 针对中大型项目, 首选Vuex (用过都说好),但是如果是小型项目使用Vue的eventBus, 是一个不错的选择。我们接下来简单说下Vue的事件总线的使用和一些常见的问题。

使用方法

Vue的实例就是一个事件总线:
import Vue from 'vue';
var vm = new Vue({
    mounted () {
        ## 此时就可以监听一个自定义事件event1
        this.$on('event1', (data) => {
            consolo.log(data);
        }); 
    },
    methods: {
        trigger () {
            this.$emit('event1', '猴赛雷~');
        }
    }
});
vm.trigger(); ## 输出: 猴赛雷~