Vue3中的祖孙组件通信——provide&inject

在 Vue 3 中，provide 和 inject 是一对用于依赖注入的 API，可以在组件树中共享数据或功能，而无需通过 props 明确传递或使用事件进行通信。这对于管理共享状态、配置或服务特别有用。

provide 和 inject 的工作原理

1. provide：在父组件中定义要共享的值。
2. inject：在子组件（或后代组件）中获取父组件提供的值。

例子：

1.祖父级别组件：grandParent.vue

<template>
	<div>祖父组件</div>
	<parent></parent>
</template>
<script setup lang="ts">
import { provide, ref } from 'vue';
import { child } from './child.vue';
const sharedData = ref<string>("来自祖父组件的数据");
// 使用 provide 提供数据
provide("sharedData", sharedData);

</script>

2.父亲级别组件：parent.vue

<template>
	<div>父亲组件</div>
	<child></child>
</template>
<script setup lang="ts">
import { inject, ref, Ref } from 'vue';
import { child } from './child.vue';
// 使用 inject 获取祖父组件提供的数据
const sharedData = inject<Ref<string>>("sharedData");
console.log(sharedData);
</script>

3.孙子级别组件：

<template>
	<div>孙子组件</div>
</template>
<script setup lang="ts">
import { inject, ref, Ref } from 'vue';
// 使用 inject 获取祖父组件提供的数据
const sharedData = inject<Ref<string>>("sharedData");
console.log(sharedData);   
</script>

孙子组件/父亲组件修改祖父组件的值 & inject默认值

在孙子或父亲组件中直接修改对应的值

sharedData.value='修改后的provide值'

但是这里会产生一个问题，当祖父组件没有通过 provide 提供对应的值时，sharedData的值为undefined,所以这里可以用非空断言或给inject添加默认值来解决

非空断言

sharedData!.value='修改后的provide值'

inject默认值

const sharedData = inject<Ref<string>>("sharedData",ref("inject的默认值"));
sharedData.value='修改后的provide值'

不让祖父组件的值被父亲组件或孙子组件修改

解决办法：在provide中加上readonly

例子：

祖父级别组件：grandParent.vue

<template>
	<div>祖父组件</div>
	<parent></parent>
</template>
<script setup lang="ts">
import { provide, ref, readonly } from 'vue';
import { child } from './child.vue';
const sharedData = ref<string>("来自祖父组件的数据");
// 使用 provide 提供数据
provide("sharedData", readonly(sharedData));

</script>