VUE3组合式API:provide和inject用法

官网传送门

provide

provide() 接受两个参数:第一个参数是要注入的 key,可以是一个字符串或者一个 symbol,第二个参数是要注入的值。

当使用 TypeScript 时,key 可以是一个被类型断言为 InjectionKeysymbolInjectionKey 是一个 Vue 提供的工具类型,继承自 Symbol,可以用来同步 provide()inject() 之间值的类型。

inject

第一个参数是注入的 key。Vue 会遍历父组件链,通过匹配 key 来确定所提供的值。如果父组件链上多个组件对同一个 key 提供了值,那么离得更近的组件将会"覆盖"链上更远的组件所提供的值。如果没有能通过 key 匹配到值,inject() 将返回 undefined,除非提供了一个默认值。

第二个参数是可选的,即在没有匹配到 key 时使用的默认值。

示例

父组件

javascript 复制代码
<script setup lang="ts">
import { ref, provide } from 'vue'
import ChildComponent from '@/views/articles/ChildComponent.vue'
const count = ref(0)
provide('count', count)
provide('num', 1)
</script>
<template>
  <ChildComponent></ChildComponent>
</template>

子组件

javascript 复制代码
<script setup lang="ts">
import { inject } from 'vue'

const count = inject('count')
const num = inject('num')
const other = inject('other')
const otherDefault = inject('otherDefault', 'default')
console.log(other)
</script>
<template>
  <div>count:{{ count }}</div>
  <div>num:{{ num }}</div>
  <div>other:{{ other }}</div>
  <div>otherDefault:{{ otherDefault }}</div>
</template>

父组件使用provide注入countnum,子组件使用provide注入一个由祖先组件或整个应用 提供的值。在子组件中countnum为父组件注入的值。other为undefined,otherDefault值为默认值default

相关推荐
魔云连洲5 分钟前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
专注VB编程开发20年8 分钟前
CSS定义网格的列模板grid-template-columns什么意思,为什么要用这么复杂的单词
前端·css
IT_陈寒14 分钟前
Redis性能提升50%的7个关键优化策略,90%开发者都不知道第5点!
前端·人工智能·后端
Hilaku21 分钟前
深入URL和URLSearchParams:别再用正则表达式去折磨URL了
前端·javascript·代码规范
pubuzhixing26 分钟前
Canvas 的性能卓越,用它解决一个棘手问题
前端
weixin_4569042727 分钟前
Vue.jsmain.js/request.js/user.js/store/index.js Vuex状态管理项目核心模块深度解析
前端·javascript·vue.js
伍哥的传说30 分钟前
Vue 3.6 Alien Signals:让响应式性能飞跃式提升
前端·javascript·vue.js·vue性能优化·alien-signals·细粒度更新·vue 3.6新特性
永日4567034 分钟前
学习日记-HTML-day51-9.9
前端·学习·html
狗头大军之江苏分军1 小时前
iPhone 17 vs iPhone 17 Pro:到底差在哪?买前别被忽悠了
前端
小林coding1 小时前
再也不怕面试了!程序员 AI 面试练习神器终于上线了
前端·后端·面试