日常小常识：Vue兄弟间怎么通信

Vue.js 的核心: 一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM的系统：

父子间通信：

大家都知道父子间通信，通过props【父子】和自定义的事件【子父】。

？？那么兄弟间组件应该怎么通信呢？？？

父组件通过props向子组件发送数据：

   父组件:
       <child :loading="loading"/>
   子组件：
       props:{
           loading:{
               type:Boolean,
               default:false
           }
       }

子组件通过this.$emit()向父组件发送数据 | 父组件接收@A=A1

   子组件： this.$emit('自定义方法A')
   父组件：
       <child @A=A1/>
       methods:{
          A1(){
              console.log("子组件点击后，父组件的这里会触发")
          }
       }

兄弟间通信核心思想：

定义一个全新的vue实例，赋值给一个大家都访问到的对象，各个组件都能访问的对象方式可以有以下几种：

单独的eventBus文件，export import 【推荐】
在main.js中全局的实例的data中定义一个新的vue实例。$root 访问
Vue.prototype.$vm = new Vue() 定义全局变量

因为新定义的eventBus对象是一个Vue实例，vue实例有$emit方法

第一种：eventBus【推荐】

新建一个js文件 eventBus.js

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

组件A：

import {eventBus} from ./js/eventBus.js
eventBus.$emit('触发名称send', 数据)

组件B：

import {eventBus} from ./js/eventBus.js
eventBus.$on('触发名称send',(数据)=>{
    console.log("A组件点击后，这里会触发")
})

第二种：$root

我们都知道vue的状态管理使用的是vuex，如果项目不大，逻辑不多，我们只需要使用$root 设置vue实例的data就可以了。

$root：根父组件

$parent: 最近一级的父组件

main.js

  new Vue({
      el:"#app",
      router,
      data(){
         return {
             vm:new Vue()
         }
      }
  })

组件A

this.$root.vm.$emit('send',data)

组件B

this.$root.vm.$on('send',data)

第三种：在main.js中定义全局变量

Vue.prototype.$vm = new Vue();
//使用
this.$vm.$emit('send',data);
this.$vm.$on('send',data);