更改组件的html元素类型

Question

我有以下Vue JS组件，它是我的网格系统的一部分。

<bl-column type="section" classList="col--4-12 col--6-12--m col--1-1--s"> 
... 
</bl-column>` 

我想要设置的元素的类型为“”（标准）“”或“”动态地，如在上面的例子中，添加包含部分或物品类型变量。

这是我Column.Vue文件：

<template> 
    <{type} :class="classList"> 
    <slot></slot> 
    </{type}> 
</template> 
<script> 
    export default { 
    name: "Column", 
    props: ['classList', 'type'], 
    data() { 
     return { 
     classList: this.classList || '', 
     type: this.type || 'div', 
     }; 
    } 
    }; 
</script> 

这显然是行不通的，并抛出一个错误，但你设定的元素类型的想法。有没有办法执行此操作而不使用render（）函数？

Answer 1

您有更简单的方法来呈现动态组件。该文档https://vuejs.org/v2/guide/components.html#Dynamic-Components

<template> 
    <component :is="type" :class="classList"> 
    <slot></slot> 
    </component> 
</template> 
<script> 
    export default { 
    name: "Column", 
    props: ['classList', 'type'], 
    data() { 
     return { 
     classList: this.classList || '', 
     type: this.type || 'div', 
     }; 
    } 
    }; 
</script> 

在线例如：https://jsfiddle.net/fotcpyc4/