Как я могу использовать условные теги Template внутри Vue SFC

Question

У меня есть два режима использования моего приложения: встроенный и не встроенный режим. Для встроенного режима (думаю, iframe) я не хочу показывать верхний и нижний колонтитулы сайта. Я пытался использовать v-if и v-else в App.vue, но код Visual Studio жалуется на наличие нескольких корневых элементов шаблона. Кажется, это должно быть разрешено:

<template v-if="embedded">
  <div id="app">
    <MyContent/>
  </div>
</template>
<template v-else>
  <div id="app">
    <TheHeader/>
    <MyContent/>
    <TheFooter/>
  </div>
</template>

Буду признателен за любые мысли по этому поводу. Это ошибка в VS Code? Разве это не разрешено?

Спасибо.

Answer 1

В vue2 с обычными .vue файлами у вас должен быть один корень.Таким образом, вы можете сделать это, обернув все это в div.

<div>  
  <template v-if="embedded">
    <div id="app">
      <MyContent/>
    </div>
  </template>
  <template v-else>
    <div id="app">
      <TheHeader/>
      <MyContent/>
      <TheFooter/>
    </div>
  </template>
<div>

Вы также можете выполнить то, что говорите, используя функциональный компонент, но я бы избегал этого, если вы не знакомы с более jsx-стилем.или иметь более сильное знание JS с гиперскриптом.https://zendev.com/2018/05/07/multi-root-vue-components.html

ПРИМЕЧАНИЕ. В Vue3 запланированы многокорневые шаблоны, поэтому это должно быть возможно в будущем

Answer 2

Вы можете попробовать ниже загрузить компоненты внутри <div id="app"> условно

<template>
  <div id="app">
    <div v-if="embedded">
      <MyContent/>
    </div>
    <div v-else>
      <TheHeader/>
      <MyContent/>
      <TheFooter/>
    </div>
  </div>
</template>