Vue3 + TypeScript中provide和inject的用法示例

基础写法(类型安全)

typescript

复制代码
// parent.component.vue
import { provide, ref } from 'vue'
import type { InjectionKey } from 'vue'

// 1. 定义类型化的 InjectionKey
const COUNTER_KEY = Symbol() as InjectionKey<number>
const USER_KEY = Symbol() as InjectionKey<{ name: string }>

// 在 setup 中使用
setup() {
  const counter = ref(0)
  provide(COUNTER_KEY, counter) // 提供响应式数据
  
  const user = { name: 'John' }
  provide(USER_KEY, user) // 提供静态对象
  
  return { counter }
}

typescript

复制代码
// child.component.vue
import { inject } from 'vue'
import type { InjectionKey } from 'vue'

// 复用相同的 key
const COUNTER_KEY = Symbol() as InjectionKey<number>
const USER_KEY = Symbol() as InjectionKey<{ name: string }>

setup() {
  // 2. 安全注入(带默认值)
  const counter = inject(COUNTER_KEY, ref(0)) // 响应式数据
  const user = inject(USER_KEY, { name: 'Guest' }) // 静态数据
  
  // 3. 强制注入(当确定父级已提供时)
  const forcedCounter = inject(COUNTER_KEY)!
  
  return { counter, user }
}

<script setup> 语法糖写法

vue

复制代码
<!-- Parent.vue -->
<script setup lang="ts">
import { provide, ref } from 'vue'

// 定义 key
const messageKey = Symbol() as InjectionKey<string>

const message = ref('Hello from parent')
provide(messageKey, message)
</script>

vue

复制代码
<!-- Child.vue -->
<script setup lang="ts">
import { inject } from 'vue'

const messageKey = Symbol() as InjectionKey<string>

// 注入 + 类型声明
const message = inject(messageKey, 'default message')

// 处理可能 undefined 的情况
const safeMessage = inject(messageKey) ?? 'fallback value'
</script>

响应式对象注入

typescript

复制代码
// types.ts
export interface User {
  id: number
  name: string
}

export const UserKey = Symbol() as InjectionKey<User>

vue

复制代码
<!-- Parent.vue -->
<script setup lang="ts">
import { provide, reactive } from 'vue'
import { UserKey } from './types'

const user = reactive({
  id: 1,
  name: 'Alice'
})

provide(UserKey, user)
</script>

vue

复制代码
<!-- Child.vue -->
<script setup lang="ts">
import { inject } from 'vue'
import { UserKey } from './types'

const user = inject(UserKey)

// 使用时需要处理可能 undefined 的情况
if (user) {
  console.log(user.name) // 类型安全
}
</script>

最佳实践提醒:

  1. 使用 InjectionKey:确保类型安全

  2. 默认值处理inject(key, defaultValue)

  3. 响应式数据 :建议使用 ref/reactive 保持响应性

  4. 代码组织:推荐将 keys 集中管理在单独文件中

  5. 安全判断 :当不确定是否已提供时,使用可选链操作符 ?.

typescript

复制代码
// 推荐的文件结构
// src/provides/keys.ts
import type { InjectionKey } from 'vue'

export const API_KEY = Symbol() as InjectionKey<AxiosInstance>
export const THEME_KEY = Symbol() as InjectionKey<'light' | 'dark'>

typescript

TypeScript 复制代码
// 祖先组件
// 提供函数给后代,获取受理样品选集
provide("provideApplySampleSelection", handleApplySampleSelectionChange);
// 获取受理样品表格勾选的行数据
const handleApplySampleSelectionChange = (newSelection: ApplySample[]) => {
  //获取勾选行数据
  applySampleTableSelection.value = newSelection;
  // 控制按钮编辑状态
  buttonDisabled();
};

// 提供数据给后代
// 受理样品列表
provide("applySampleList", applySampleTableData); // applySampleTableData是个Ref对象,不需要.value,传递ref对象本身(响应式数据)
// 受理类别
provide(
  "acceptType",
  computed(() => applyBasicInfo.value.acceptType) // applyBasicInfo.value.acceptType 是派生数据(属性数据),通过computed提供响应式数据
);
// 操作指令类型:新增删除:info-add;修改:info-modify;查看:info-view
provide("operateCommandType", ref("info-add"));
// 滚动到离顶部表头的距离
provide("scrollTop", applySampleTableScrollTop); // applySampleTableScrollTop是个Ref对象,不需要.value,传递ref对象本身(响应式数据)


// 后代组件
// 注入祖先提供的函数
const sendApplySampleSelection = inject("provideApplySampleSelection", (data: ApplySample[]) => {});

// 获取受理样品表格勾选的行数据
const handleApplySampleSelectionChange = (newSelection: ApplySample[]) => {
  // 向祖先组件发送表格选集
  sendApplySampleSelection(newSelection);
};

// 接收祖先提供的数据
// 受理样品列表
const applySampleList = inject<Ref<ApplySample[]>>("applySampleList", ref([]));
// 受理类别
const acceptType = inject<Ref<string>>("acceptType", ref(""));
// 操作指令类型:新增删除:info-add;修改:info-modify;查看:info-view
const operateCommandType = inject<Ref<"info-add" | "info-modify" | "info-view">>("operateCommandType", ref("info-add"));
// 滚动到离顶部表头的距离
const scrollTop = inject<Ref<number>>("scrollTop", ref(0));
相关推荐
鱼樱前端41 分钟前
今天介绍下最新更新的Vite7
前端·vue.js
独立开阀者_FwtCoder2 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句2 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom2 小时前
JavaScript reduce()函数详解
javascript
小飞悟2 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子2 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
蓝翔认证10级掘手2 小时前
🤯 家人们谁懂啊!我的摸鱼脚本它...它成精了!🚀
javascript
炒毛豆3 小时前
vue3.4中的v-model的用法~
前端·vue.js
前端康师傅3 小时前
JavaScript 中你不知道的按位运算
前端·javascript
tianchang3 小时前
策略模式(Strategy Pattern)深入解析与实战应用
前端·javascript·代码规范