Question

我有两种使用应用程序的模式，一种是嵌入式模式，另一种是非嵌入式模式。对于嵌入式（认为iframe）模式，我不想显示网站的页眉和页脚。我尝试在App.vue中使用v-if和v-else，但是Visual Studio Code抱怨有多个模板根元素。似乎应该允许它：

<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

在带有常规.vue文件的vue2中，您必须具有单个根目录。因此，您可以通过将整个内容包装在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样式或更丰富的hyperscript 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>

如何在Vue SFC中使用条件模板标签

2 个答案: