有没有办法在主机设置函数之外的 Vue3 动态组件中声明提供/注入？

Question

我正在 Vue3 中创建一个动态组件。我使用 v-bind 提供 props。

<code><component :is='MyComponent' v-bind='myProps' />
</code>

我想使用提供/注入功能。如何将我提供的属性放入动态组件中。我的动态组件在 setup 函数中调用 inject，并期望为其子组件提供值。

虽然这在 Vue 上没有记录，但我没有成功尝试：

<component :is='MyComponent' v-bind='myProps' :provide='myProvidedProps'/>

甚至尝试将 provide 对象放入 props 对象中。

Answer 1

浏览完 Vue3 源代码后，无法直接在模板中向动态组件指示provide规范。必须在托管动态组件的父级的设置函数或选项中，或者在动态组件的设置或选项中调用它。

这两个选项是：

1. 您在托管动态组件的组件上调用 provide。

setup() {
  provide('message', 'hello')
}

<template>
  <component :is='myComponent' />
</template>

这对我不起作用，因为我的设置函数在我的动态组件被激活之前就被调用了；我还需要将组件类型和提供的值一起设置。

2. 将要提供的项目作为 prop 发送到组件中，并让动态组件调用它们。

function setComponent(someImportedComponent, providedValues) {
  myComponent.value = someImportedComponent
  myProps.value = {
    toProvide: providedValues
  }
}

<template>
  <component :is='myComponent' v-bind='myProps' />
</template>

我的组件

setup() {
  for(let [key,value] of Object.entries(props.toProvide) ) {
    provide(key, value)
  }
}

现在这有它的问题，因为每个动态组件现在都需要负责了解并调用传入的提供项。

解决方案1

解决每个组件需要了解所提供值的方法是创建一个提供值的中间组件。

可提供（中间组件）

<script setup lang="ts">
import {provide} from 'vue'

const props = defineProps<{
  is: any
  provide?: Record<string, any>
  [key: string]: any
}>()

if (props.provide) {
  for (const [key, value] of Object.entries(props.provide)) {
    provide(key, value)
  }
}

const _props = Object.fromEntries(Object.entries(props).filter(it => {
  return it[0] !== 'is' && it[0] !== 'provide'
}))
</script>

<template>
  <component :is="is" v-bind="_props"/>
</template>

像这样使用它：

<template>
  <providable :is="myComponent" :provide='toProvide' v-bind='myProps' />
</template>

解决方案2

更简洁的解决方案是创建一个包装器组件，类似于 keep-alive 的工作原理。目标组件只需放入默认槽即可。

提供.vue

<script setup lang="ts">
import {provide} from 'vue'

const props = defineProps<{
  value: Record<string, any>
}>()

for (const [key, value] of Object.entries(props.value)) {
  provide(key, value)
}
</script>

<template>
  <slot name="default"/>
</template>

并像这样使用它：

<template>
  <provide value='toProvide'>
    <my-component v-bind='myProps' />
  </provide>
</template>