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

Question

如何创建一个类似于vue-router的组件router-link,我通过props获取标签来呈现我的模板？

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

会呈现:

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

Answer 1

你可以component像这样使用内置元素:

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

请参阅:https://vuejs.org/v2/guide/components.html#Dynamic-Components

Answer 2

编辑:请检查@krukid答案,这是一个更好的解决方案,component当我回答时,我不知道元素

渲染功能方式:

您需要创建一个使用render函数的"包装器组件".

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>

有关渲染功能的更多信息,请参阅官方文档