vue项目 全局传值Bus总线

在vue项目中我们常常需要传值，但是有时候需要传值的组件并不是父子组件，哪怎么办呢？
那就需要我们今天的主角 Bus vuex，一般项目比较小或者只需要个别几个全局的传值，那么我们只需要使用Bus就行，接下来让我们看下Bus是如何传值的

Bus 总线

当我们在项目中需要 少量 的非父子组件进行传值，我们会使用Bus进行传值

实现Bus传值的步骤

使用Bus总线，一种就是直接写在main.js里面，另一种比较常用，是建立一个bus文件，然后进行引用

直接写在main.js文件中

1. 引用Bus， 在main.js中注册bus

   window.EventBus = new Vue()
   	new Vue({
   	  el: '#app',
   	  router,
   	  components: { App },
   	  template: '<App/>'
   	})
   

2. 使用 $on 定义Bus事件, 在这里我们定义了一个busClick事件
   a.vue 页面

   export default {
     data () {
      return {
   	   show: false
   	  }
   	},
      mounted () {
   	  // 监听事件
   	 window.EventBus.$on('busClick', msg => {
   	   this.show = msg
   	  })
   	}
    }
   

3. 使用 $emit 调用Bus事件，当点击button按钮时，a页面的show变成true
   b.vue 页面

   <template>
     <div >
      <button  @click="busClick(true)">调用busClick事件</button>
     </div>
   </template>
   <script>
   export default {
     methods: {
       handlerNum (num) {
         window.EventBus.$emit('openMenu', num)
       }
     }
   }
   </script>
   

建立Bus.js文件

1. 引用Bus，建立一个Bus.js文件

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

2. 定义bus事件， 都要先引用bus页面
   a.vue 页面

   import Bus from './Bus'
   export default {
     data () {
      return {
   	   show: false
   	  }
   	},
      mounted () {
   	  // 监听事件
   	 window.EventBus.$on('busClick', msg => {
   	   this.show = msg
   	  })
   	}
    }
   

3. 调用bus事件，当点击button按钮时，a页面的show变成true
   b.vue 页面

   import Bus from '../utils/Bus'
   <template>
     <div >
      <button  @click="busClick(true)">调用busClick事件</button>
     </div>
   </template>
   <script>
   export default {
     methods: {
       handlerNum (num) {
         window.EventBus.$emit('openMenu', num)
       }
     }
   }
   </script>