Question

VueJS每个组件仅允许一个根元素。在大多数情况下，可以将组件包装在div标记内，但有时可能会导致意外行为。

例如，在使用Bootstrap时，如果在两个元素（例如<b-row>和<b-col>）之间放置一个div，则布局将完全损坏。

框架中的许多其他元素都需要遵循特定的顺序，这就是为什么拥有一个根元素可能会造成问题的原因。

有没有办法动态设置根元素？

为说明我的意思，请看以下示例：

如果a具有这样的成分my-h1：

<template>
    <div>
        <h1>Hello world</h1>
    </div>
</template>

在这里被呼叫

<div id="my-app">
    <my-h1 />
</div>

上面的代码将输出：

<div id="my-app">
    <div>
        <h1>Hello world</h1>
    </div>
</div>

我如何获得此输出：

<div id="my-app">
    <p>
        <h1>Hello world</h1>
    </p>
</div>

在另一个地方，这个地方：

<div id="my-app">
    <a>
        <h1>Hello world</h1>
    </a>
</div>

（我知道这些标签没有任何意义，仅是出于本示例的目的）

我希望你明白我的意思。仍然有一个根元素，但是使用道具或其他东西将其设置为不同：）

Answer 1

只需使用特殊的<component>组件，该组件即可动态选择该组件：

MyComponent.vue

<template>
  <component :is="is" v-bind="props">
    Hello world
  </component>
<template>

export default {
  props: ['is', 'props'],
}

用法如下：

<my-component is="div"/>
<my-component is="p"/>

Answer 2

使用插槽，您将不得不替换整个组件，我认为这不是您想要的。

另一种解决方案是将 type 属性传递给您的组件并进行切换（我不知道它是否符合vue的一般原理）

但这是我在想的一个例子：

<template>
    <template v-if="type === 'div'">
      <div>
        <h1>Hello world</h1>
      </div>
    </template>

    <template v-else-if="type === 'a'">
      <a>
        <h1>Hello world</h1>
      </a>
    </template>

    <template v-else-if="type === 'p'">
      <p>
        <h1>Hello world</h1>
      </p>
    </template>

    <template v-else>
      <i>
        This is a default
        <b>ITALIC TEXT</b>
      </i>
    </template>
</template>

<script>
export default {
  props: {
    type: String
  }
};
</script>

然后您调用组件

<component type="div|p|a|whatever"/>

更改组件的根元素

2 个答案: