非父子通信（拓展） event bus 事件总线

作用：非父子组件之间，进行简易消息传递。 (复杂场景 → Vuex)

1、创建一个都能访问到的事件总线 (空 Vue 实例) → utils/EventBus.js

import Vue from 'vue'
const Bus = new Vue()
export default Bus

2、A 组件(接收方)，监听 Bus 实例的事件

created () {
    Bus.$on('sendMsg', (msg) => {
  
    this.msg = msg
  })
}

3、B 组件(发送方)，触发 Bus 实例的事件

Bus.$emit('sendMsg', '这是一个消息')

非父子通信 (拓展) - provide & inject

provide & inject 作用：跨层级共享数据。

1、父组件 provide 提供数据

export default {
  provide () {
    return {
      // 普通类型【非响应式】
      color: this.color, 
      // 复杂类型【响应式】
      userInfo: this.userInfo, 
    }
  }
}

2、子/孙组件 inject 取值使用

export default {
  inject: ['color','userInfo'],
    created () {
    console.log(this.color, this.userInfo)
  }
}