Как использовать <slot/> в качестве корневого элемента компонента Vue?

Я хотел бы создать компонент-оболочку, который просто добавляет некоторый JavaScript к фактическому компоненту, который передается, но без создания дополнительного элемента HTML.

Это работает, но создает div в качестве корневого элемента:

      <template>
  <div v-observe-visibility="{ callback: isViewableNow, once: true }"
       :class="{ 'visible animated slideInRight': showAnimation, 'invisible': !showAnimation }">
     <slot/>
  <div/>
</template>

Я хотел бы что-то подобное, без добавления div, например:

      <template>
  <slot v-observe-visibility="{ callback: isViewableNow, once: true }"
       :class="{ 'visible animated slideInRight': showAnimation, 'invisible': !showAnimation }"/>
</template>

Это, однако, дает мне ошибку:

Нельзя использовать в качестве корневого элемента компонента, так как он может содержать несколько узлов.

Возможно ли это каким-либо другим способом в Vue?

Источник

0 ответов

Другие вопросы по тегам