Javascript 更改组件的根元素

VueJS只允许每个组件有一个根元素。在大多数情况下，将组件封装在

div

标记中是可以的，但有时会导致意外行为

例如，当使用引导时，如果在两个元素（如

和

）之间放置一个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>

你好，世界

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

---

---

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

使用插槽，您必须替换整个组件，我认为您不需要这样做

另一种解决方案是将类型属性传递给组件并进行切换（我不知道它是否符合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"/>

---

使用插槽，您必须更换整个组件，我认为您不需要

另一种解决方案是将类型属性传递给组件并进行切换（我不知道它是否符合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"/>

只需使用允许您动态选择组件的特殊组件即可：

MyComponent.vue

你好，世界

导出默认值{
道具：['is'，'props']，
}

用法如下：

只需使用允许您动态选择组件的特殊组件即可：

MyComponent.vue

你好，世界

导出默认值{
道具：['is'，'props']，
}

用法如下：

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