VUE-中央事件总线插件vue-bus

最新推荐文章于 2025-07-05 09:01:50 发布

原创最新推荐文章于 2025-07-05 09:01:50 发布 · 597 阅读

0 ·

CC 4.0 BY-SA版权

【VUE】专栏收录该内容

68 篇文章

订阅专栏

本文介绍如何在Vue项目中使用全局事件总线(bus)实现组件间通信。通过定义和使用自定义事件，实现了从子组件向父组件传递随机数值的功能。文章通过具体代码示例展示了事件总线的安装、事件的触发与监听过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-bus.js

const install = function (Vue) {
    const Bus = new Vue({
        methods: {
            emit (event, ...args) {
                this.$emit(event, ...args);
            },
            on (event, callback) {
                this.$on(event, callback);
            },
            off (event, callback) {
                this.$off(event, callback);
            }
        }
    });
    Vue.prototype.$bus = Bus;
};

export default install;

main.js

import VueBus from './vue-bus';
Vue.use(VueBus); //加载插件VueBus

views/counter.vue

<template>
    <div>
        {{ number }}
        <button @click="handleAddRandom">随机增加</button>
    </div>
</template>
<script>
    export default {
        props: {
            number: {
                type: Number
            }
        },
        methods: {
            handleAddRandom () {
                // 随机获取 1-100 中的数
                const num = Math.floor(Math.random () * 100 + 1);
                this.$bus.emit('add', num);
            }
        }
    };
</script>

说明：

1）定义一个按钮，组件有个属性名称是number；

2）组件定义了一个方法，随机去一个数据，会调用bus定义的一个时间，并将数据传递过去；

views/index.vue

<template>
    <div>
        <h1>首页</h1>
        随机增加：
        <Counter :number="number"></Counter>
    </div>
</template>
<script>
    import Counter from './counter.vue';

    export default {
        components: {
            Counter
        },
        computed: {
           .....
        },
        methods: {
            .......
            handleAddRandom (num) {
                this.number += num;
            }
        },
        data () {
            return {
                number: 0
            }
        },
        created () {
            this.$bus.on('add', this.handleAddRandom);
        },
        beforeDestroy () {
            this.$bus.off('add', this.handleAddRandom);
        }
    }
</script>

说明：

1）导入自定义的组件，计数器；

2）组件创建和销毁后，分别绑定和基础自定义的事件add，即对add事件进行监听；

3）接受触发add事件后，接受到传递过来的数据；