vue总线Bus.js

有时候两个组件也需要通信（非父子关系）。当然Vue2.0提供了Vuex，但在简单的场景下，可以使用一个空的Vue实例作为中央事件总线。

实际运用的时候一般把bus抽离出来；Bus.js import Vue from 'vue' const Bus = new Vue(); export default Bus; 组件调用时引入组件1 import Bus from './Bus'; ...... methods: { .... Bus.$emit('fn', param) } 组件2 import Bus from './Bus'; ...... methods: { .... Bus.$on('fn', item => { .... }) }

---

也可以直接将Bus注入到Vue根对象中 import Vue from 'vue' const Bus = new Vue() var app= new Vue({ el:'#app', 　　 data:{ 　　　　Bus }　　 }) // 在子组件中通过this.$root.Bus.$on(); this.$root.Bus.$emit()来调用