Question

如何根据prop条件在不同的parent元素之间切换，并保持其内容不变？

示例：如果Item具有isRouter属性，则它将渲染具有所需属性的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标签定义，但是如果您不想在{{ 1}}。

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

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

1 个答案: