Question

有没有办法根据条件将父元素定义为可选，但始终在Vue.js中显示其子元素？

例如：

<a :href="link">Some text</a>

我想要实现的是以下DOM，具体取决于link

<a href="somelink">Some text</a> <!-- when link is truthy -->
Some text                        <!-- when link is falsy -->

潜在解决方案

复制孩子：
```
<a :href="link" v-if="link">Some text</a>
<template v-if="!link">Some text</template>
```
但这不是一个好的解决方案，特别是因为可能有更多内容而不仅仅是简单的文字。
编写我自己的组件，根据某些属性执行逻辑。但这似乎有些过分，而且必须足够灵活，以适应不同类型的元素类型或属性。

由于我不喜欢这些方法中的任何一种，我想知道是否没有更简单的解决方案。有什么想法吗？

Answer 1

经过一番挖掘后，我找到了一种有效的方法，实际上非常简单。当您无法直接将组件绑定到HTML元素时，它会使用实际意图使用的is special attribute。

<a :href="link" :is="link ? 'a' : 'span'">Some text</a>

这将导致以下任一情况：

<a href="somelink">Some text</a> <!-- when link is truthy -->
<span>Some text</span>           <!-- when link is falsy -->

Answer 2

对于 Vue v3.x，以下内容有效：

  <component
    :is="condition ? 'custom-component' : 'v-fragment'"
    custom-component-prop
    ...
  >
    ...
  </component>

// VFragment.vue
<template>
  <slot></slot>
</template>

<script>
  export default {
    inheritAttrs: false,
  }
</script>

对于 Vue v2.x，解决方法是：

  <component
    :is="condition ? 'custom-component' : 'v-div'"
    custom-component-prop
    ...
  >
    ...
  </component>

// VDiv.vue
<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
  export default {
    inheritAttrs: false,
  }
</script>

权衡是会有一个额外的元素，比如 div 被渲染，因为 Vue v2.x 不支持片段。

Answer 3

您可以使用自定义组件和named slots的组合来减轻儿童的重复，例如：

<custom-component>
    <a :href="link" slot="slot-name-here" v-if="link">
        <custom-content-component></custom-content-component>
    </a>
    <div slot="slot-name-here" v-else>
        <custom-content-component></custom-content-component>
    </div>
</custom-component>

或者，如果要更改的内容不是太复杂，您可以考虑使用v-html

Answer 4

~~不确定为什么我以前的答案被删除了。~~事实证明，您不能只是跨多个问与答的答案。我已经继续，并将其他Q标记为该Q的重复（我在这里尝试...来主持人...）

我本人几次遇到这个确切的问题，决定继续使用我在本地使用的解决方案创建一个模块，该模块可以在NPM上找到：

vue-wrapped-component

该模块提供了功能性Vue组件，该组件允许使用其他组件或元素有条件地包装任何组件或元素。

前面的答案在非常基本的情况下是半成品。该模块提供了一个更强大的解决方案，几乎可以在任何情况下使用，尤其是在复杂的情况下，由于您需要一个简单的条件包装程序而存在重复大量代码的风险。

Vue.js

4 个答案: