如何提供从 vue 功能组件传递的注入

Posted 2023-02-23

技术标签:

【中文标题】如何提供从 vue 功能组件传递的注入【英文标题】：How to provide passed injection from vue functional component 【发布时间】：2020-03-07 23:48:47 【问题描述】：

树：

<Parent>
  <FnChild>
    <Target />
  </FnChild>
</Parent>

我有Parent 提供的$validator。在 FnChild 内部，我将渲染函数与其他异步组件 (Target) 一起使用。

  inject: ['$validator'],
  render: (h, context) => 
    return h(Target, context.data, context.children)

注入存在于context.injections 中，但如何使用函数组件将其传递给Target？

我可以想象只将 FnChild 重写为非功能组件并在 FnChild 中使用 provide: ['$validator']

UPD：正如答案中所指出的，您不需要在功能组件内进行任何注入/提供，它就可以工作。

我的具体案例与 v-validate 和在每个组件中自动注入新的 $validator 有关。在我的具体情况下，它是一个带有插槽的组件，它覆盖了$validator，因为我里面没有inject: ['$validator']。结构很简单：

父母

<ComponentWithSlot>
  <FnChild slot='my-slot' />
</ComponentWithSlot>

Parent 注入了验证器，但 ComponentWithSlot 没有，因此 v-validate 为 ComponentWithSlot 重新创建了新实例，并将其提供给 FnChild 而不是来自Parent 组件的$validator。

所以一旦我将inject: ['$validator'] 添加到ComponentWithSlot 中，一切都很好，Target 现在可以正确接收来自Parent 的$validator。

【问题讨论】：

为什么在这种情况下需要使用渲染函数？除非绝对必要，否则我通常会避免使用它们。 @MJ_Wales 我认为当你不需要实例或者它是一个没有任何逻辑的组件时使用功能组件是个好主意（在我的情况下，它只是另一个异步组件的解析器）。那么为什么不让它更轻量级呢？但是在 vue 中，使用函数式组件通常很痛苦……因为奇怪的工作方式、错误或奇怪的 api。很公平。我认为这个问题是一个范围界定问题。我会发表我的想法我不确定对不起，删除了我的错误答案。 【参考方案1】：

provide/inject API 专门设计用于：