动态更改 Vue JS 2 上的父元素标签

Question

如何根据道具条件在不同的父元素之间切换，保持其内容相同？

示例：如果Item有isRouterprop，则渲染router-link所需的属性，否则渲染一个简单的li元素。

/* Item.vue */

<router-link v-if="isRouter" tag="li" :to="to" active-class="is-active">
<li v-else>
    /* some html */
    <slot></slot>
    /* more html */
</li>
</router-link>

// View.vue
<list>
  <item isRouter to="/new">
    Breaking News
  </item>
  <item>
    Orange
  </item>
</list>

这是可能的吗？你建议我遵循什么方法？

Answer 1

好的，所以我确实找到了一种方法来做你想做的事！

使用 vue 的component标签和vbind:is属性（或:is简写）。

<component :is="isRouter ? 'router-link' : 'li'" :to="to">
  <!-- repeated content -->
  <slot></slot>
  <!-- more repeated content -->
</component>

:is如果需要，可以将该属性委托给计算属性。请注意，您想要传递给 的任何道具router-link都需要为component标签定义，但如果您不希望它们出现在li.

这是我找到它的地方：https://vuejs.org/v2/guide/components.html#Dynamic-Components
如果您需要进一步阅读，还有一个链接可以提供有关动态组件的更多详细信息。