Vue全局事件总线(兄弟组件之间传值)

1、安装全局时间总线。在man.js中给这个Vue实例添加一个beforeCreate钩子。在Vue原型对象中添加一个$bus赋值为当前应用的vm(Vue实例)

Vue全局事件总线(兄弟组件之间传值)_第1张图片

2、使用事件总线。

一、提供数据的组件:使用$bus的$emit Api去传值给A组件

Vue全局事件总线(兄弟组件之间传值)_第2张图片

二、接收数据组件比如:A组件想接受数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件的自身,可以在mounted钩子中接受数据

Vue全局事件总线(兄弟组件之间传值)_第3张图片

3、最好在接收数据的组件中的beforeDestroy钩子中,用$bus的$off Api去解绑当前组件所用的事件

Vue全局事件总线(兄弟组件之间传值)_第4张图片

 

 

你可能感兴趣的:(Vue.js,vue.js,前端,javascript)