第十一章：Provide / Inject —— 地下管网，不用层层搬货

1 分钟 105 字第 81 / 962 个阅读单元

当数据要跨很多层组件传递时，只靠 props 会出现 prop drilling。

vue

<!-- DistrictProvider.vue -->
<script setup lang="ts">
import { provide, ref } from 'vue';

const districtTheme = ref('modern');
provide('districtTheme', districtTheme);
</script>

<template>
  <slot />
</template>

vue

<!-- DeepChild.vue -->
<script setup lang="ts">
import { inject } from 'vue';

const districtTheme = inject('districtTheme');
</script>

<template>
  <p>街区主题：{{ districtTheme }}</p>
</template>

它更像地下管网，适合基础设施，不适合把所有业务状态都偷运进去。全局、可调试、跨页共享的业务状态，应该优先考虑 Pinia。