更改组件

Question

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

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

我想将元素的类型设置为＆＃34;＆＃34; （标准），＆＃34;＆＃34;或＆＃34;＆＃34;动态地，如上例所示，添加一个包含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/

Answer 2

<template>
  <component :is="type">
    <slot />
  </component>
</template>
<script>
export default {
  name: 'Heading',
  props: {
    type: {
      type: String,
      default: () => 'h1',
    },
  },
};
</script>