在开发中，我们构建了组件树之后，除了父子组件之间的通信之外，还会有非父子组件之间的通信。
非父子组件的通信又可以分为祖先组件和后代组件之间的通信、兄弟组件之间的通信、没有任何关系组件之间的通信
这里我们主要讲祖先组件和后代组件之间的通信
祖先组件向后代组件传递数据：
祖先组件通过provide向后代组件传递数据
后代组件通过inject接收祖先组件传递给后代组件的数据
image.png
project/inject用法
image.png
基本用法
对象写法:祖先组件只能传给子孙一些固定的数据，不能把data里的数据传给子孙组件
App.vue
<template>
<div>
<Home></Home>
</div>
</template>
<script>
import Home from './Home.vue'
export default {
components: {
Home,
},
provide: {//对象写法只能传给子孙一些固定的数据，不能把data里的数据传给子孙组件
name: 'why',
age: 18
},
data() {
return {
message: '今天天气不错'
}
}
}
</script>
App.vue的子组件Home.vue
<template>
<div>
<home-content></home-content>
</div>
</template>
<script>
import HomeContent from './HomeContent.vue'
export default {
components: {
HomeContent
}
}
</script>
App.vue的孙子组件HomeContent.vue
<template>
<div>
姓名：{{name}} - 年龄： {{age}}
</div>
</template>
<script>
export default {
inject: ['name', 'age']
}
</script>
进阶用法
如果想把祖先组件data中的数据传递给后代组件，需要把provide写成函数形式，此函数返回一个对象
App.vue
<template>
<div>
<input v-model="message" />
<Home></Home>
</div>
</template>
<script>
import Home from './Home.vue'
export default {
components: {
Home,
},
provide() {
//函数写法可把data中的数据传递给子孙组件
return {
name: 'why',
age: 18,
message: this.message
}
},
data() {
return {
message: '今天天气不错'
}
}
}
</script>
App.vue的子组件Home.vue
<template>
<div>
<home-content></home-content>
</div>
</template>
<script>
import HomeContent from './HomeContent.vue'
export default {
components: {
HomeContent
}
}
</script>
App.vue的孙子组件HomeContent.vue
<template>
<div>
姓名：{{name}} - 年龄： {{age}}
<p>{{message}}</p>
</div>
</template>
<script>
export default {
inject: ['name', 'age', 'message']
}
</script>
执行npm run serve运行项目，并在浏览器打开
image.png
修改祖先组件
App.vue中input输入框的值，改变message的值后代组加
HomeContent.vue接收到的message依然为祖先组件App.vue中data里message属性的初始值，修改
祖先元素中message的值，后代组件接收到的message的值并不会响应式改变
image.png
深度进阶用法
如果希望祖先组件传递给后代组件的数据，如果祖先元素中数据发生改变，后代组件接收到的数据也响应式发生改变,需要借助vue3提供的computed Api
App.vue
<template>
<div>
<input v-model="message" />
<Home></Home>
</div>
</template>
<script>
import Home from './Home.vue'
import { computed } from "vue"
export default {
components: {
Home,
},
provide() {
//使用computed把message的值变成一个响应式对象，computed函数的返回值为ref对象
return {
name: 'why',
age: 18,
message: computed(() => this.message),
}
},
data() {
return {
message: '今天天气不错'
}
}
}
</script>
App.vue的子组件Home.vue
<template>
<div>
<home-content></home-content>
</div>
</template>
<script>
import HomeContent from './HomeContent.vue'
export default {
components: {
HomeContent
}
}
</script>
App.vue的孙子组件HomeContent.vue
<template>
<div>
姓名：{{name}} - 年龄： {{age}}
<!--message为ref对象，值存储在value中-->
<p>{{message.value}}</p>
</div>
</template>
<script>
export default {
inject: ['name', 'age', 'message']
}
</script>
执行npm run serve运行项目，并在浏览器打开
修改祖先元素中message的值，后代组件接收到的message的值也会响应式改变
image.png
如果希望祖先组件传递给后代组件的数据，如果祖先元素中数据发生改变，后代组件接收到的数据也响应式发生改变，但是不用vue3api，只用vue2api
App.vue
<template>
<div>
<input v-model="message" />
<Home></Home>
</div>
</template>
<script>
import Home from './Home.vue'
export default {
components: {
Home,
},
provide() {
//使用vue2用法的话，message的值改为一个有返回值的方法
return {
name: 'why',
age: 18,
message: () => this.message,
}
},
data() {
return {
message: '今天天气不错'
}
}
}
</script>
App.vue的孙子组件HomeContent.vue
<template>
<div>
姓名：{{name}} - 年龄： {{age}}
<!--message为ref对象，值存储在value中-->
<p>{{message()}}</p>
</div>
</template>
<script>
export default {
inject: ['name', 'age', 'message']
}
</script>
后代组件向祖先组件传递数据：
通过使用mitt模块创建的事件总线emitter实现
后代组件通过emitter.emit发射事件,可以携带参数
祖先组件通过emitter.on监听事件，在回调中接收参数
例：想要实现点击HomeContent中的修改message按钮，修改App.vue中的message的值
1.安装mitt
npm install mitt --save
2.封装src/utils/eventbus.js
import mitt from "mitt"
const emitter = mitt()
export default emitter
3.App.vue中通过emitter.on监听其他组件中通过事件总线发射的具体某个事件
<template>
<div>
<input v-model="message" />
<Home></Home>
</div>
</template>
<script>
import Home from "./Home.vue";
import { computed } from "vue";
import emitter from "./utils/eventBus";
export default {
components: {
Home,
},
provide() {
return {
name: "why",
age: 18,
message: computed(() => this.message),
};
},
created() {
//监听事件
emitter.on("changeMes", (message) => {
console.log(message);
this.message = message;
});
},
data() {
return {
message: "今天天气不错",
};
},
};
</script>
App.vue的子组件Home.vue
<template>
<div>
<home-content></home-content>
</div>
</template>
<script>
import HomeContent from './HomeContent.vue'
export default {
components: {
HomeContent
}
}
</script>
4.App.vue的孙子组件HomeContent.vue中通过emitter.emit发射事件
<template>
<div>
姓名：{{name}} - 年龄： {{age}}
<!--message为ref对象，值存储在value中-->
<p>{{message.value}}</p>
<button @click="changeMessage">修改message</button>
</div>
</template>
<script>
import emitter from "./utils/eventBus";
export default {
inject: ["name", "age", "message"],
methods: {
changeMessage() {
//发射事件
emitter.emit("changeMes", "雷电预警");
},
},
};
</script>
执行npm run serve，效果如下图，点击了修改message按钮，App.vue中message被改变
image.png
image.png
5.如果想在App.vue中监听所有组件通过事件总线发射的事件，可以通过下面：
//监听所有组件通过事件总线发送的事件
emitter.on("*", (type, message) => {
console.log("第一个参数为监听到的事件类型", type);
console.log("第二个参数为监听到的事件传递的参数", message);
});
例：
<template>
<div>
<input v-model="message" />
<Home></Home>
</div>
</template>
<script>
import Home from "./Home.vue";
import { computed } from "vue";
import emitter from "./utils/eventBus";
export default {
components: {
Home,
},
provide() {
return {
name: "why",
age: 18,
message: computed(() => this.message),
};
},
created() {
//监听事件
emitter.on("changeMes", (message) => {
console.log(message);
this.message = message;
});
//监听所有组件通过事件总线发送的事件
emitter.on("*", (type, message) => {
console.log("第一个参数为监听到的事件类型", type);
console.log("第二个参数为监听到的事件传递的消息", message);
});
},
data() {
return {
message: "今天天气不错",
};
},
};
</script>
<style scoped></style>
image.png
6.Mitt的事件取消
在某些情况下我们可能希望取消掉之前注册的函数监听：
6.1取消emitter中所有的监听
emitter.all.clear()
6.2取消具体某个事件的监听
//监听的时候，需要把触发监听调用的回调函数的引用地址进行保存
const onFoo = () => {}
emitter.on('foo', onFoo) //监听
emitter.off('foo', onFoo) //取消监听
mitt模块创建的事件总线不仅可以用在后代组件向祖先组件发送事件传递消息，祖先组件监听事件，
也可以用在任何两个组件之间，其中一个向另一个发射事件，传递消息
此文档主要内容来源于王红元老师的vue3+ts视频教程
