Vue中bus通讯折叠侧边栏

折叠侧边栏为例

<el-aside :width="isCollapse?'10px':'200px'">        
        <el-menu  :default-active="this.$route.path"  unique-opened router :collapse="isCollapse">
        </el-menu>           
</el-aside>

 

创建bus.js （也可用来子组件向子组件传递数据 ）

import Vue from 'vue';
const bus = new Vue();
export default bus; 

A传值 isCollapse 给 B

A页面

import bus from './bus'

export default {
    data() {
        return {
            isCollapse: false
        }
    },
    methods: {
        click() {
            this.isCollapse = !this.isCollapse
            bus.$emit('collapse', this.isCollapse);
        },
    }
}

B页面接收 isCollapse 

import bus from './bus' 
export default {
    data() {
        return {
            isCollapse: false
        };
    },
    created() {
            // e为A页面传来的 isCollapse
            bus.$on('collapse', e => {
                this.isCollapse = e;
            });
        },
}