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://v2.vuejs.org/v2/api/#is

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