vue使用bus进行组件通信

全局引入

在main.js中全局引入

const bus = new Vue()
Vue.prototype.$bus = bus;

使用场景

在顶部导航栏选择不同的二级菜单，在左侧渲染相对应的三级菜单，就涉及到两个组件之间方法调用，即组件(A)调用组件(B)的方法

image.png

调用方法

A组件

<el-dropdown type="primary" @command="handleCommand">
                    <span class="el-dropdown-link">SDK测试<i class="el-icon-arrow-down el-icon--right"></i> </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="a">线上巡检</el-dropdown-item>
                        <el-dropdown-item command="b">多媒体播放质量</el-dropdown-item>
                        <el-dropdown-item command="c">SDK接口测试</el-dropdown-item>
                    </el-dropdown-menu>
</el-dropdown>

handleCommand(val) {
            console.log('Headerval: ', val);
            // 这里应该就是 打印的 a b c 这几个值
            this.$bus.$emit('navChange', val);
        },

B组件

this.$bus.$on('navChange', (res) => {
            console.log('Navres', res);
            if (res == 'a') {
                this.showNav();
                this.isActive = true;
                this.bisActive = true;
                this.cisActive = true;
            } else if (res == 'b') {
                this.showNav();
                this.isActive = true;
                this.aisActive = true;
                this.cisActive = true;
            } else if (res == 'c') {
                this.showNav();
                this.isActive = true;
                this.aisActive = true;
                this.bisActive = true;
            }
        });

默认进入首页要加载全部的三级菜单，所以进入时默认让所有的三级菜单显示，点击相应的二级菜单拿到值去做判断，隐藏不需要的菜单