更改组件的html元素类型

Question

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

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

我想动态地将元素的类型设置为""(标准),""或"",如上例所示,添加包含section或article的类型变量.

这是我的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/