Vue组件的传值(非父子之间)

在Vue项目的main.js中定义全局bus

Vue.prototype.bus = new Vue()

在src目录下的assets中新建bus.js组件之间通信的公共汽车

/*
*bus.js
*/
import Vue from 'vue'
export default new Vue()

在组件中应用

/*
*组件1，要传值的组件
*/
//控制元素的显示隐藏
import Bus from "@/assets/bus.js";
export default{
   data(){
     return{
        aa:false          
     },
      mounted(){
        let vm = this;
        Bus.$emit("changeA",vm.aa)//changeA为自己定义的名称，用作接收组件接收时的标识
      }
   }
}

通过bus接收组件1传过来的值改变aa的状态

/*
*组件2，要接收的组件
*/
import Bus from "@/assets/bus.js";
export default{
   data(){
     return{
       aa:true
     }
   }，
   mounted(){
     let vm = this;
     Bus.$on("changeA",aa => {
          vm.aa = aa  //将传过来的aa值赋给当前页面的aa
          console.log(vm.aa)//false
          //此时return中aa的值变为false
     })
   }
}

除了改变状态，bus还可以用来传递数据，方式同上.非父子组件之间传值都可以用bus.真的是很好用的方法