Vue中Event Bus的使用

使用场景:

  1. 兄弟组件传参
  2. 非父子组件传参
    注:父子组件传参也是可以的,但是因为父子组件传参比较简单,如果使用eventBus或者Vuex显得大材小用了
效果展示: Vue中Event Bus的使用
文章图片

代码展示:
  1. 在utils中创建一个eventBus.js文件,用来导入导入vue实例对象
import Vue from 'vue'; export default new Vue();

  1. 既然叫事件车,那肯定就有个上车和下车的过程,我们在A组件上车
.wrap{ width: 150px; background: lightblue; color: red; line-height: 1; }

  1. 在B组件中下车——在created阶段接收A组件传来的参数
.wrap{ width: 150px; background: lightcoral; color: green; line-height: 1; }

【Vue中Event Bus的使用】动动手,其实也很简单~~

    推荐阅读