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

Answer 2

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

更改组件的 html 元素类型

Change html element type of component

javascript

vue.js

vue-component

vuejs2