非父子通信-event bus 事件总线-provide inject

1.作用

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

2.步骤

创建一个都能访问的事件总线 （空Vue实例）

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

A组件（接受方），监听Bus的 $on事件

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

B组件（发送方），触发Bus的$emit事件(可以被多个接收方接收)

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

3.代码示例

BaseA.vue(接受方)

<template>
<div class="BaseA">
  我是A组件（接收方）
  <p>{{mse}}</p>
</div>
</template>

<script>
import Bus from "../util/EventBus";
export default {
  name: "BaseA",
  created() {
    Bus.$on('mse',(msg)=>{
      this.mse=msg
    })
  },
  data(){
    return{
      mse:''
    }
  }
}
</script>

<style scoped>
.BaseA {
  width: 200px;
  height: 200px;
  border: 3px solid #000;
  border-radius: 3px;
  margin: 10px;
}
</style>

BaseB.vue(发送方)

<template>
<div class=" BaseB">
  <div>我是B组件（发布方）</div>
  <button @click="sendMse">发送消息</button>
</div>
</template>

<script>
import Bus from "../util/EventBus";
export default {
  name: "BaseB",
  methods:{
    sendMse(){
      Bus.$emit('mse','今天天气不错')
    }
  }
}
</script>

<style scoped>
.BaseB {
  width: 200px;
  height: 200px;
  border: 3px solid #000;
  border-radius: 3px;
  margin: 10px;
}
</style>

App.vue

<template>
<div>
  <BaseA></BaseA>
  <BaseB></BaseB>
</div>
</template>

<script>

import BaseA from "@/components/BaseA.vue";
import BaseB from "@/components/BaseB.vue";
export default {
  name: 'App',
  components: {
    BaseA,
    BaseB
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

4.效果

5、非父子通信-provide&inject

1.作用

跨层级共享数据

2.场景

 

3.语法

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)
  }
}

4.注意

• provide提供的简单类型的数据不是响应式的，复杂类型数据是响应式。（推荐提供复杂类型数据）

• 子/孙组件通过inject获取的数据，不能在自身组件内修改

5.效果