1. 程式人生 > 其它 >Vue中bus通訊摺疊側邊欄

Vue中bus通訊摺疊側邊欄

摺疊側邊欄為例

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

建立bus.js

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

A傳值isCollapse 給 B

A頁面

 1 import bus from './bus'
 2 
 3 export default {
 4     data() {
 5         return {
 6             isCollapse: false
 7         }
 8     },
 9     methods: {
10         click() {
11             this.isCollapse = !this.isCollapse
12             bus.$emit('collapse', this
.isCollapse); 13 }, 14 } 15 }

B頁面接收isCollapse

import bus from './bus' 
export default {
    data() {
        return {
            isCollapse: false
        };
    },
    created() {
            // e為A頁面傳來的 isCollapse
            bus.$on('collapse', e => {
                this.isCollapse = e;
            });
        },
}