Как визуализировать область видимости другого компонента?

Question

Минимальный завершенный проверяемый пример

Этот CodeSandbox является MCVE.

Описание проблемы

Чтобы кратко описать мою проблему, у меня есть следующая структура компонентов без рендеринга (все используют области видимости и визуализируют только первый элемент из них):

• FragmentA, которые предназначены для использования с FragmentB s внутри них
• FragmentB, которые предназначены для использования с FragmentC s внутри них
• FragmentC, которые будут визуализировать свой слот с областью действия

Проблема заключается в том, что иногда на некоторых входных данных FragmentC должен отображать FragmentB.

Чтобы избежать повторения части FragmentB в шаблоне пользовательского пространства, я хотел бы иметь возможность отображать FragmentB ' s слот в области видимости внутри FragmentC с использованием входных данных из FragmentC.

Этот тип "рекурсии" гарантированно имеет базовый случай, который отображает собственный слот FragmentC.

Что я пробовал до сих пор

Я пытался получить доступ к слоту напрямую, используя t он предоставляет / внедряет API, как осуществляется доступ к самой области может не быть проблемой, я считаю это происходит из-за того, как я пытаюсь его отобразить.

Отображать как only child

// 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 не будет функцией.

Визуализация в виде массива дочерних элементов

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

Это вызовет бесконечную рекурсию.

Конкретный вопрос в одном предложении

Как один go о программной рендеринге слота области действия другого компонента внутри другого компонента?

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],
      ]
    );
  }
}