一、vue3 | 通信组件之provide 与 inject实现兄弟组件通信
通过共同祖先组件使用provide 与 inject来提供和注入状态，从而实现兄弟组件通信的示例。例子：祖先组件提供了一个名为 sharedState 的响应式状态，并通过 provide 函数将其提供给所有子组件。ChildA 和 ChildB 通过 inject 函数接收这个状态，并可以在需要时更新或显示它。代码如下：
二、共同的祖先组件
<script lang="ts" setup>
// 兄弟组件通信
import ChildA from '@/components/ChildA.vue'
import ChildB from '@/components/ChildB.vue'
import { provide ,reactive} from 'vue'
//提供了一个名为 SharedSate 的响应式状态
const SharedSate = reactive({
message:'Change'
})
// 提供状态给子组件
provide('SharedSate',SharedSate)
</script>
三、子组件
ChildA.vue(子组件一)
<template>
兄弟组件的组件A：{{ SharedSate1.message }}
<button @click="updateMess">修改组件A</button>
</template>
<script lang="ts" setup>
import { inject } from 'vue'
// 注入共享状态
const SharedSate1 = inject<{ message: string }>('SharedSate')
// 更新消息的方法
const updateMess = () => {
if (SharedSate1) {
SharedSate1.message = 'Updated by ChildA';
}
}
</script>
ChildB.vue(子组件二)
<template>
兄弟组件的组件B：{{ SharedSate.message }}
<button @click="updateMess">修改组件B</button>
</template>
<script lang="ts" setup>
import { inject } from 'vue'
// 注入共享状态
const SharedSate = inject<{ message: string }>('SharedSate');
// 更新消息的方法
function updateMess() {
if (SharedSate) {
SharedSate.message = 'Updated by ChildB';
}
}
</script>
四、实际应用场景
用户认证状态：在导航栏、侧边栏和主内容区域的用户登录或注销状态
主题或布局偏好：更改网站的主题（如深色模式/浅色模式）或布局（如单列/双列布局）
五、结个尾
注意，在 TypeScript 中使用 inject 时，你需要为注入的状态提供一个类型注解，以确保类型安全。如果多个组件之间共享大量状态，或者这些状态之间的依赖关系变得复杂，那么考虑使用 Vuex 或其他全局状态管理库可能是一个更好的选择。
