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

vue

发布日期: 2020-11-12

更新日期: 2022-10-16

文章字数: 601

阅读时长: 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>