更改組件的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/