一、兄弟组件之间的通信
（1）使用Vue的状态管理器Vue：建议在大型项目中使用
（2）使用第三方的模块：mitt(中央数据总线方式)，创建一个事件中心，由它来进行事件的监听、触发，在这个过程中实现任意组件之间的通信
1️⃣安装
npm install mitt
2️⃣创建事件中心
// 导入mitt
import mitt from 'mitt'
// 创建事件触发器
const emitter = mitt();
// 导出事件触发器
export default emitter;3️⃣创建组件，在组件中使用事件触发器，触发事件的同时发送数据
4️⃣接收数据
注：A组件和B组件是兄弟组件
（1）on('事件名',callback)：事件的监听，一旦监听的事件被触发，说明兄弟组件在传递数据，callback用来接收数据
（2）emit('事件名',data)：事件触发
A组件监听的事件名必须与B组件触发的事件名相同
Brother1：
<template>
<div class="brother1">
<h2>兄弟 ———— 孙悟空</h2>
<p>{{ data1 }} {{ data2 }}</p>
<button @click="sendData">给你一棒子</button>
</div>
</template>
<script>
import emitter from "@/event-center/event";
export default {
name: "Brother1",
data() {
return {
data1:'金箍棒', //本组件的数据
data2:'' //兄弟组件传递的数据
}
},
methods:{
sendData(){ //向兄弟组件发送数据，需要使用事件中心的触发器触发事件
emitter.emit('one-to-two',this.data1)
},
receive(){
emitter.on('two-to-one',(e)=>{
this.data2 = e;
})
}
},
mounted() { //钩子函数：当组件挂载时，接收数据
this.receive();
}
}
</script>
<style scoped>
.brother1{
color: mediumpurple;
font-size: 20px;
border: 1px solid #bbb ;
margin-bottom: 10px;
}
</style>Brother2：
<template>
<div class="brother2">
<h2>兄弟 ———— 猪八戒</h2>
<p>{{ data1 }} {{ data2 }}</p>
<button @click="sendData">给你一朵花</button>
</div>
</template>
<script>
import emitter from "@/event-center/event";
export default {
name: "Brother1",
data() {
return {
data1:'玫瑰花',
data2:''
}
},
methods:{
sendData(){
emitter.emit('two-to-one',this.data1)
},
//接收数据
receive(){
emitter.on('one-to-two',(e)=>{ //第1个参数：监听的事件名，第2个参数：回调函数用来接收兄弟组件传递的数据
this.data2 = e;
})
}
},
mounted() { //钩子函数：当组件挂载时，接收数据
this.receive();
}
}
</script>
<style scoped>
.brother2{
color: deepskyblue;
font-size: 20px;
border: 1px solid #bbb ;
margin-bottom: 10px;
}
</style>
二、跨级组件之间的通信
provide/inject 类似于消息的订阅发布。provide提供或发送数据，inject接收数据。
（1）provide(name,value)：函数接收2个参数
name：定义提供property的name
value：property的值
（2）inject(name,default)：函数有2个参数
name：接收provide提供的属性名
default：设置默认值，可以不写，是可选参数
QianLong：
<template>
<div>
<h2>孙子：乾隆</h2>
<div>爷爷:{{ getYeData }}</div>
</div>
</template>
<script>
//导入inject函数：用来接收数据
import {inject} from "vue";
export default {
name: "QianLong",
data(){
return {
getYeData:inject('LastWords')
}
}
}
</script>
<style scoped>
</style>YongZheng：
<template>
<div>
<h2>儿子：雍正</h2>
<div>父亲：{{ getFatherData }}</div>
</div>
<hr>
<QianLong/>
</template>
<script>
import {inject} from "vue";
import QianLong from "@/components/QianLong";
export default {
name: "YongZheng",
data(){
return {
getFatherData:inject('LastWords')
}
},
components:{
QianLong
}
}
</script>
<style scoped>
</style>KangXi：
<template>
<div>
<h2>康熙：{{ lastWords }}</h2>
</div>
<hr>
<YongZheng/>
</template>
<script>
import {provide} from "vue";
import YongZheng from "@/components/YongZheng";
export default {
name: "KangXi",
data(){
return {
lastWords:'整顿吏治'
}
},
components:{
YongZheng
},
created() { //钩子函数，在组件创建时触发
provide('LastWords',this.lastWords);
}
}
</script>
<style scoped>
</style>
