Vue组件上的条件根标记

Question

我的问题

我有一个Vue组件，可以像这样渲染内容：

<template>

    <div class="item">
        <h1>{{ title }}</h1>
        <p>{{ contents }}</p>
        <!-- Lot's of other stuff... -->
    </div>

</template>

<script>
    // export default...
</script>

<style lang="scss">
    // style...
</style>

在div ...

内内记录内容

在某些情况下，我需要将<div class="item">更改为<a class="item">。考虑到这一点，有没有办法为Vue组件的根元素有条件地更改标签（例如a，div）？

研究

我已经在网上搜索了一下，并且能够像使用render函数那样找到一些东西：

render (createElement) {
    return createElement(this.tag, {}, this.$slots.default);
}

上述问题是，例如，这意味着我需要两个单独的组件。 Item.vue和ItemTag.vue。当然有一种方法可以使用一个组件吗？

Answer 1

我相信您可以使用is：

<div :is="useA ? 'a' : 'div'">
    ...
</div>

这并不是文档所建议的用途，但似乎确实具有预期的效果。

https://vuejs.org/v2/api/#is

使用render函数不一定需要您具有两个组件，但是需要将整个模板重写为render函数。