Vue兄弟组件传参-bus总线传值

bus总线传值

我认为bus总线传值，挺好用的一个方法，操作也相对简单

一.在项目中创建一个单独的eventBus.js文件

 

 

当然也可以不放在这里，放在根目录随便那个地方应该都行

import Vue from 'vue'
export default new Vue()

这是文件内容，实际上就是向外暴露了一个vue实例

二.在想传值的兄弟组件中，引入刚才的js

import eventBus from '@/assets/js/eventBus'
export default {
  data() {
    return {
      fage: true,
    };
  },
  created() {
    
  },
  methods: {
    open() {
      this.fage = !this.fage;
      eventBus.$emit("add", this.fage);//这是传出的组件
    },
  },
};

import eventBus from '@/assets/js/eventBus'
export default {
  data() {
    return {
      isCollapse: true,
    };
  },
  created() {
    eventBus.$on("add", (message) => {
      //一些操作，message就是从组件传过来的值
      console.log("导航栏传的值",message);
      this.isCollapse=message
    });
  },