如何使用 Vue 2 创建基于道具的动态标签

Question

如何制作类似于 vue-router router-link 的组件，通过 props 获取标签来渲染我的模板？

<my-component tag="ul">
</my-component>

将呈现：

<ul>
  anything inside my-component
</ul>

Answer 1

编辑： 请检查@krukid 的回答，这是一个更好的解决方案，我在回答

时不知道 component 元素

渲染函数方式：

您需要创建一个使用渲染函数的 "wrapper component"。

import Vue from 'vue';

Vue.component('wrapper-component', {
  name: 'wrapper-component',
  render(createElement) {
    return createElement(
      this.tag,   // tag name
      this.$slots.default // array of children
    );
  },

  props: {
    tag: {
      type: String,
      required: true,
    },
  },
});

然后在任何其他模板中使用如下

<wrapper-component tag="div">
  <span>All this will be rendered to inside a div</span>
  <p>
    All 
  </p>
</wrapper-component>

那应该呈现给这个

<div>
  <span data-v-4fcf631e="">All this will be rendered to inside a div</span> 
  <p data-v-4fcf631e="">
    All 
  </p>
</div>

要了解有关渲染函数的更多信息，请参阅 official documentation

Answer 2

您可以像这样使用内置 component 元素：

<component is="ul" class="foo" style="color:red">
  anything inside component
</component>

参见：https://vuejs.org/v2/guide/components.html#Dynamic-Components

如何使用 Vue 2 创建基于道具的动态标签

How to create dynamic tag based on props with Vue 2

vue.js

vue-router

vuejs2