Vue系列之：eventBus的的使用

大家好我是前端菜鸟林三心，今天我给大家分享vue常用的组件之间的通信方式——eventBus

eventBus实质就是一个Vue对象，并通过$emit 和 $on进行事件绑定，从而实现组件之间数据得传输

目录结构

eventBus/index.js

import Vue from 'vue';
export const eventBus = new Vue();

App.vue

<div id="a">子组件:<Children></Children></div>
<button @click="sendMsg">给子组件信息</button>

import Children from './Children.vue';
import {eventBus} from './eventBus/index';

sendMsg(){
        eventBus.$emit('Msg','老爸给你的');
      }

Children.vue

import {eventBus} from './eventBus/index.js';
export default {
  data() {
    return {
        msg:''
    };
  },
  mounted() {
      eventBus.$on('Msg',msg=>{
          this.msg += msg;
      })
  },
};

我会变成大佬的，加油