需求：右侧界面上一个新增菜单的弹框，点击确定按钮之后左侧的菜单也需要动态新增，这时就用到了兄弟组件之间的传值方式：

未添加菜单时左侧菜单为空

 

 

 

 点击确定之后：

 

 

 

 实现：

1.  添加菜单的弹框界面中form提交时

import bus from '@/utils/bus'   //form提交     confirm(formName){       this.$refs[formName].validate((valid) => {         if (valid) {             this.loadingbut = true;             this.loadingtext = "提交中";             let formData = new FormData();             formData.append('Code', this.form.Code)             request({               url: '/api/Product/Create',               method: 'post',               data: formData,               headers:{                 "Content-Type": "multipart/form-data","Authorization": "Bearer " + getToken()               }             }).then(res =>{                 bus.$emit('menueChange', '菜单需要刷新');//向菜单组件传递信息                 this.$message({type: "success",message:res.message});                 this.exit();                 this.$emit("getProductListData");             }).catch(error => {               console.log("添加失败: ",error)             }).finally(() => {               this.loadingbut = false;               this.loadingtext = "确定";             });           }       });     },

2.  菜单组件中接收

import bus from '@/utils/bus'     mounted(){     bus.$on('menueChange', (e) => {       console.log(e);       this.getMenuData(); //接收成功，执行自己的逻辑操作，一般都是先刷新菜单数据     })       },  

3.  bus.js

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