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

相关推荐
LuckySusu7 小时前
【js篇】深入理解 JavaScript 原型与原型链
前端·javascript
文心快码BaiduComate7 小时前
文心快码入选2025服贸会“数智影响力”先锋案例
前端·后端·程序员
云枫晖7 小时前
手写Promise-构造函数
前端·javascript
文心快码BaiduComate7 小时前
用Comate Zulu开发一款微信小程序
前端·后端·微信小程序
王王碎冰冰7 小时前
基于 Vue3@3.5+跟Ant Design of Vue 的二次封装的 Form跟搜索Table
前端·vue.js
naice8 小时前
我对github的图片很不爽了,于是用AI写了一个图片预览插件
前端·javascript·git
天蓝色的鱼鱼8 小时前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
RoyLin8 小时前
TypeScript设计模式:门面模式
前端·后端·typescript
小奋斗8 小时前
千量数据级别的数据统计分析渲染
前端·javascript
小文刀6968 小时前
CSS-响应式布局
前端