vue3 | 通信组件之provide 与 inject实现兄弟组件通信

一、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>

四、实际应用场景

1. 用户认证状态：在导航栏、侧边栏和主内容区域的用户登录或注销状态
2. 主题或布局偏好：更改网站的主题（如深色模式/浅色模式）或布局（如单列/双列布局）

五、结个尾

        注意，在 TypeScript 中使用 inject 时，你需要为注入的状态提供一个类型注解，以确保类型安全。如果多个组件之间共享大量状态，或者这些状态之间的依赖关系变得复杂，那么考虑使用 Vuex 或其他全局状态管理库可能是一个更好的选择。