Vue3动态组件：如何在宿主setup函数外传递provide值？

你之前给<component>标签绑:provide属性、或是把provide对象塞进props里的做法都行不通——Vue的provide特性不是通过组件属性或props传递的，得在渲染动态组件的父组件的setup函数里调用provide方法来注册要传递的属性。

第一步：在父组件里提供值 #

在渲染<component>的那个组件的setup里，用provide把要传的属性注册好：

<script setup>
import { provide } from 'vue'
import MyComponent from './MyComponent.vue'

// 定义要提供的属性
const myProvidedProps = {
  userInfo: { name: 'Steven', id: 123 },
  theme: 'dark'
}

// 注册提供的属性，第一个参数是注入用的标识key，第二个是要传的值
provide('providedData', myProvidedProps)
</script>

<template>
  <!-- 动态组件该传props还是正常传 -->
  <component :is="MyComponent" v-bind="myProps" />
</template>

第二步：在动态组件里取值并传给子组件 #

动态组件MyComponent的setup里用inject拿到父组件提供的值，之后要么让子组件自己用inject拿，要么把值当props传给子组件，也可以重新provide一次给子组件用：

<script setup>
import { inject, provide } from 'vue'

// 注入父组件提供的值
const providedData = inject('providedData')

// 如果要让自己的子组件也能拿到这个值，可以再provide一次（可选）
provide('childProvidedData', providedData)
</script>

<template>
  <div>动态组件拿到的提供值：{{ providedData }}</div>
  <!-- 要么传props给子组件 -->
  <ChildComponent :user="providedData.userInfo" />
</template>

为啥之前的方法没用？ #

• :provide根本不是Vue组件的合法属性，Vue不会认这个来处理provide/inject逻辑，provide只能通过组件内部的provideAPI注册。
• 把provide对象放进props里，只会让动态组件把它当成普通props接收，和inject完全不搭边，触发不了provide/inject的传递逻辑。

额外小技巧 #

要是需要动态更新提供的值，把值包成ref或reactive就行，这样值变的时候，所有注入的组件都会自动同步更新：

import { provide, ref } from 'vue'
const theme = ref('dark')
provide('theme', theme)
// 之后改theme.value，所有用inject拿theme的组件都会跟着变

内容的提问来源于stack exchange，提问作者Steven Spungin