Vue学习之 bus状态管理

vue使用bus来进行组件间通讯(兄弟组件之间)

新建一个 js bus.js

1
2
3
4
import Vue from 'vue'

const bus = new Vue()
export default bus

作为通讯的中间媒介

在main.js中修改vue的prototype

1
Vue.prototype.$bus = bus

简单使用

准备两个组件,比如emil.vue和tel.vue

在emil.vue 里面,写一个button,并且给一个点击事件,触发后执行

this.$bus.$emit('on-click','vue bus state manager')

在tel.vue里显示一个message,并在mounted事件里面执行

1
2
3
this.$bus.$on('on-click',msg=>{
this.message = msg
})

点击emil.vue里面得按钮后,改变tel.vue里面得message的值

原理

$emit 可以触发当前实例上的事件,附加的参数会传递给监听器回调

$on 监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。

在tel.vue里面使用$on监听on-click 事件,在emil.vue里面使用$emit 触发on-click 事件,通过bus这个vue实例,从而实现兄弟组件间的通讯。