84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
我正在 Vue3 中创建一个动态组件。我使用 v-bind 提供 props。
Vue3
动态组件
v-bind
props
我想使用提供/注入功能。如何将我提供的属性放入动态组件中。我的动态组件在 setup 函数中调用 inject，并期望为其子组件提供值。
提供/注入
setup
inject
提供
虽然这在 Vue 上没有记录，但我没有成功尝试：
甚至尝试将 provide 对象放入 props 对象中。
provide
浏览完 Vue3 源代码后，无法直接在模板中向动态组件指示provide规范。必须在托管动态组件的父级的设置函数或选项中，或者在动态组件的设置或选项中调用它。
这两个选项是：
setup() { provide('message', 'hello') }
这对我不起作用，因为我的设置函数在我的动态组件被激活之前就被调用了；我还需要将组件类型和提供的值一起设置。
function setComponent(someImportedComponent, providedValues) { myComponent.value = someImportedComponent myProps.value = { toProvide: providedValues } }
我的组件
setup() { for(let [key,value] of Object.entries(props.toProvide) ) { provide(key, value) } }
现在这有它的问题，因为每个动态组件现在都需要负责了解并调用传入的提供项。
解决每个组件需要了解所提供值的方法是创建一个提供值的中间组件。
可提供（中间组件）
像这样使用它：
更简洁的解决方案是创建一个包装器组件，类似于 keep-alive 的工作原理。目标组件只需放入默认槽即可。
默认槽
提供.vue
并像这样使用它：
浏览完 Vue3 源代码后，无法直接在模板中向
动态组件指示provide规范。必须在托管动态组件的父级的设置函数或选项中，或者在动态组件的设置或选项中调用它。这两个选项是：
provide。setup() { provide('message', 'hello') }这对我不起作用，因为我的设置函数在我的动态组件被激活之前就被调用了；我还需要将组件类型和提供的值一起设置。
function setComponent(someImportedComponent, providedValues) { myComponent.value = someImportedComponent myProps.value = { toProvide: providedValues } }我的组件
setup() { for(let [key,value] of Object.entries(props.toProvide) ) { provide(key, value) } }现在这有它的问题，因为每个动态组件现在都需要负责了解并调用传入的提供项。
解决方案1
解决每个组件需要了解所提供值的方法是创建一个提供值的中间组件。
可提供（中间组件）
像这样使用它：
解决方案2
更简洁的解决方案是创建一个包装器组件，类似于 keep-alive 的工作原理。目标组件只需放入
默认槽即可。提供.vue
并像这样使用它：