Vue使用bus总线，实现非父子组件间的通信

vue

发布日期: 2020-11-12

更新日期: 2026-04-15

文章字数: 549

阅读时长: 2 分

阅读次数:

vue组件通信方式有好多，可以使用props传值，但是props只能父子组件使用。也可以使用vuex，但是vuex比较重，而且非全局的通信最好不要使用vuex。

在简单的场景下，可以使用一个空的Vue实例作为中央事件总线。

这里有两种方式可以使用

第一种是新建一个bus.js文件，初始化一个空的Vue实例，作为中央总线，然后再组件引用时调用这个bus.js文件

import Vue from "vue";
const EventBus = new Vue();
export default EventBus;

第二种是全局定义，将bus挂载到vue.prototype上

import Vue from "vue";
Vue.prototype.bus = new Vue();

下面根据一个实例来看一下这两种写法

子组件1

<template>
    <section>
        <h1>left</h1>
        <el-button type="primary" @click="isClick">点击</el-button>
    </section>
</template>
<script>
    import eventBus from "~/utils/eventBus";
    export default {
        methods: {
            isClick() {
                eventBus.$emit("isLeft", "点击事件！");
                this.bus.$emit("liRight", "asdasdasdasd");
            },
        },
    };
</script>

子组件2

<template>
    <section>
        <h1>right</h1>
    </section>
</template>
<script>
    import eventBus from "~/utils/eventBus";
    export default {
        data() {
            return {
                name: "right默认值",
            };
        },
        mounted() {
            this.bus.$on("liRight", val => {
                console.log(val);
            });
            eventBus.$on("isLeft", info => {
                console.log(info);
            });
        },
        beforeDestroy() {
            this.bus.$off(["isLeft", "liRight"]);
        },
    };
</script>

父组件

<template>
    <section>
        <el-row>
            <el-col :span="12">
                <left />
            </el-col>
            <el-col :span="12">
                <right />
            </el-col>
        </el-row>
    </section>
</template>
<script>
    import left from "~/components/left";
    import right from "~/components/right";
    export default {
        components: {
            left,
            right,
        },
    };
</script>