1

树：

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

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

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

注射存在于内部context.injections，但如何Target通过使用功能组件将其传递给？

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

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

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

家长

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

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

因此，一旦我添加inject: ['$validator']到ComponentWithSlot中，一切都很好，Target现在可以正确地$validator从Parent.

4

1 回答 1

1

提供/注入 API专门设计用于：

允许祖先组件充当其所有后代的依赖注入器，无论组件层次结构有多深，只要它们位于同一父链中。

  1. FnChildinject: ['$validator']根本不需要使用
  2. 无需在FnChild渲染函数中传递与注入相关的任何内容
  3. 只需inject: ['$validator']在您的Target异步组件中使用

检查这个简单的例子

提供和注入主要用于高级插件/组件库用例。不建议在通用应用程序代码中使用它们。

于 2019-11-13T21:34:29.507 回答