コンポーネントのhtml要素タイプを変更します

Question

グリッドシステムの一部である次のVue JSコンポーネントがあります。

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

私は要素のタイプを設定すると「」（標準）、「a」または「an」は動的にすることにより、部分又は物品が含まれている型の変数を追加して、上記の例のように。

これは私の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

ダイナミックコンポーネントを簡単にレンダリングできます。 DOC 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/