更改组件的根元素答案

【问题标题】：Change the root element of a component更改组件的根元素
【发布时间】：2019-09-17 13:46:20
【问题描述】：

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

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

框架中的许多其他元素需要遵循特定的顺序，这就是为什么只有一个根元素可能会出现问题。

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

为了说明我的意思，看一下这个例子：

如果有一个组件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>

（我知道这些标签没有任何意义，只是为了这个例子的目的）

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

【问题讨论】：

我认为您可以通过使用插槽，甚至通过传递道具并签入模板来实现这一点......
你能给我一个例子吗？

标签： javascript vue.js

【解决方案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"/>

【讨论】：

【解决方案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"/>

【讨论】：