Vue Именованные слоты Caveat?

Question

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

<template>
 <div v-for="field in formFields">
  <slot name="`${field.key}_PREPEND`">
   <span hidden></span>
  </slot>
  <slot name="`${field.key}_FIELD`">
    <slot name="`${field.key}_LABEL`">{{ field.label }}</slot>
    <slot name="`${field.key}_CONTROL`">
      <input v-if="field.type === 'text'" v-model="model[field.key]"></input>
      <input type="checkbox" v-else-if="field.type === 'checkbox'" v-model="model[field.key]"></input>
    </slot>
  </slot>
  <slot name="`${field.key}_APPEND`">
   <span hidden></span>
  </slot>
 </div>
</template>

(это по сути выдолбленная версия компонента создания автоформ, который у меня есть)

Затем я могу повторно использовать этот компонент следующим образом:

<auto-form
   :fields="someArray"
   :model="someObject"
>
   <template slot="Name_PREPEND"> This goes before the name field </template>
   <template slot="Name_FIELD"> For some reason this isn't being rendered, the default slot markup is</template>
   <template slot="Name_APPEND"> This goes after the name field </template>
</auto-form>

По какой-то причине, используя вышеуказанную разметку (<auto-form> ), слот "${field.key}_FIELD" игнорируется.

Если я изменю внутреннюю разметку поля _PREPEND следующим образом

<slot name="`${field.key}_PREPEND`">
   <span hidden>
     <slot name="`${field.key}_CONTENT`"></slot>
   </span>
 </slot>

Я также не могу переопределить слот _PREPEND (но могу переопределить _CONTENT)

Это просто ограничение Vue компонентных слотов? т.е. не разрешены ли вложенные слоты для компонентов?

В этом конкретном случае ограничение не позволит разработчику, использующему этот компонент AutoForm, сказать, перекрывая одновременно элемент управления и метку через слот _FIELD (для моего использования я хотел добавить логи c, которые сделали конкретное поле условным на основе значения других полей в форме)

Answer 1

В случае, если кто-то еще столкнется с этой проблемой, это немного подлый.

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

Итак, простое решение - использовать v-show вместо v-if при попытке переопределить слот компонента.

(не имеет ничего общего со слотами для вложенных компонентов, как первоначально предполагалось)