Question

如何制作类似于vue-router router-link的组件，我通过道具获取标签以呈现我的模板？

<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元素

渲染功能方式：

您需要创建一个＆＃34;包装器组件＆＃34;使用渲染功能。

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

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

2 个答案: