如何渲染另一个组件的作用域插槽？

Question

最少完整的可验证示例

This CodeSandbox是MCVE。

问题描述

为了简要描述我的问题，我具有以下非渲染组件结构（全部使用作用域的插槽，并且仅渲染其中的第一项）：

• FragmentA应该与其中的FragmentB s一起使用
• FragmentB应该与其中的FragmentC s一起使用
• FragmentC将呈现其作用域内的广告位

问题在于，有时FragmentC会根据某些输入而呈现FragmentB。

为了避免在userland模板中重复FragmentB部分，我希望能够使用来自{的输入数据来渲染FragmentB内FragmentC的作用域广告位{1}}。

确保这种“递归”具有可呈现FragmentC自己的广告位的基本情况。

到目前为止我已经尝试过的

我尝试使用Provide / Inject API直接访问插槽，如何访问作用域本身可能不是问题，我相信从我尝试渲染的方式开始。

渲染为独生子

FragmentC

这将导致递归呈现的// FragmentC.vue { inject: ["$fragB"], components: { FragmentB }, render(h){ return /*some condition*/ ? this.$scopedSlots.default(/* render own scoped slot */)[0] : h( FragmentB, {}, this.$fragB.$scopedSlots.default(/* render FragmentB scoped slot */)[0] ); } } 不是FragmentB的函数。

渲染为子级数组

this.$scopedSlots.default

这将导致无限递归。

一句话中的具体问题

如何以编程方式在另一个组件内部渲染另一个组件的作用域插槽？

Answer 1

经过一些挖掘和对代码的摆弄，我发现以下解决方案可以正确呈现：

// FragmentC.vue
{
  inject: ["$fragB"],
  components: { FragmentB },
  render(h){
    return /*some condition*/
    ? this.$scopedSlots.default(/* render own scoped slot */)[0]
    : h(
      FragmentB,
      {
          props: {/*fragB props*/},
          scopedSlots: {
              default: this.$fragB.$scopedSlots.default(/* render FragmentB scoped slot */)[0],
          }
      },
      [
          this.$fragB.$scopedSlots.default(/* render FragmentB scoped slot */)[0],
      ]
    );
  }
}