vue Bus总线
有时候两个组件也需要通信(非父子关系)。当然Vue2.0提供了Vuex,但在简单的场景下,可以使用一个空的Vue实例作为中央事件总线。
参考:http://blog.csdn.net/u013034014/article/details/54574989?locationNum=2&fps=1
例子:https://segmentfault.com/q/1010000007491994
<div id="app"> <c1></c1> <c2></c2> </div>
var Bus = new Vue(); //为了方便将Bus(空vue)定义在一个组件中,在实际的运用中一般会新建一Bus.js Vue.component('c1',{ //这里已全局组件为例,同样,单文件组件和局部组件也同样适用 template:'<div>{{msg}}</div>', data: () => ({ msg: 'Hello World!' }), created() { Bus.$on('setMsg', content => { this.msg = content; }); } }); Vue.component('c2',{ template: '<button @click="sendEvent">Say Hi</button>', methods: { sendEvent() { Bus.$emit('setMsg', 'Hi Vue!'); } } }); var app= new Vue({ el:'#app' })
在实际运用中,一般将Bus抽离出来:
Bus.js
import Vue from 'vue' const Bus = new Vue() export default Bus
组件调用时先引入
组件1
import Bus from './Bus' export default { data() { return { ......... } }, methods: { .... Bus.$emit('log', 120) }, }
组件2
import Bus from './Bus' export default { data() { return { ......... } }, mounted () { Bus.$on('log', content => { console.log(content) }); } }
但这种引入方式,经过webpack打包后可能会出现Bus局部作用域的情况,即引用的是两个不同的Bus,导致不能正常通信
运用二:
当然也可以直接将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()来调用
运用三:
将bus挂载到vue.prototype上(这里用了插件的写法)
// plugin/index.js import Bus from 'vue'; let install = function (Vue) { ... ... // 设置eventBus Vue.prototype.bus = new Bus(); ... ... } export default {install}; // main.js import Vue from 'vue'; import plugin from './plugin/index'; ... ... Vue.use(plugin); ... ...
组件一中定义
... ... created () { this.bus.$on('updateData', this.getdata); }
组件二中调用
this.bus.$emit('updateData', {loading: false});
注意:注册的总线事件要在组件销毁时卸载,否则会多次挂载,造成触发一次但多个响应的情况
beforeDestroy () { this.bus.$off('updateData', this.getData); }