Vue中非父子组件之间传值

非父子组件（跨级组件和兄弟组件）通信时，使用了bus（中央事件总线）的一个方法，用来触发和接收事件，进一步起到通信的作用。

 

Demo效果展示

 

 

新建一个bus.js文件，写入如下代码

 

公共bus.js

// 公共bus.js
// 非父子组件之间传值，需要定义个公共的公共实例文件bus.js，作为中间仓库来传值，不然路由组件之间达不到传值的效果
import Vue from 'vue'
export default new Vue()

 

新建一个componentA.vue文件，写入如下代码

 

组件A：

<template>
  <div class="componentA">
    <h1>我是组件A</h1>
    <button @click="MsgToB">点击</button>
  <