兄弟通信

官方文档说明

有时候，非父子关系的两个组件之间也需要通信。在简单的场景下，可以使用一个空的 Vue 实例作为事件总线：

官方api.png

演示代码

使用一个空的 Vue 实例作为事件总线

  // main.js
  export var bus = new Vue()
  //

A组件

<template>
  <div>
    <span>我是A组件的数据->{{a}}</span>
    <input type="button" value="把A数据传给C" @click = "send">
  </div>
</template>

<script>
  // 引入空的实例
  import { bus } from '@/main.js'
  export default {
    data () {
      return {
        a: "我是a组件中数据"
      }
    },
    methods: {
     send () {
       bus.$emit("a-msg", this.a)
     }
    }
  }
</script>

<style>
</style>

C组件

<template>
  <div>
    <div>
        <h3>我是C组件</h3>
        <span>接收过来A的数据为: {{a}}</span>
        <br>
    </div>
  </div>
</template>

<script>
  // 引入空的实例
  import { bus } from '@/main.js'
  export default {
    data () {
      return {
        a: ""
      }
    },
    mounted () {
      // 监听事件
      bus.$on("a-msg", (a) => this.a = a)
    }
  }
</script>

王叔：使用一个空的 Vue 实例作为事件总线的痛点的进一步优化方法

其它方法：this. $root.$ emit; this. $root.$ off; this. $root.$ on;