Vue中bus通訊摺疊側邊欄
阿新 • • 發佈:2021-10-15
摺疊側邊欄為例
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 defaultbus;
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; }); }, }