Question

我对Vue还是很陌生，所以如果我做的事情很荒谬，请告诉我。

我的许多组件中的一个通用约定是这样的（仅显示代码的相关部分）：

thing = {text:"some text", href: "https://a.link"}

<template>
  <div>
    <a v-if="thing.href" :href="thing.href">{{thing.text}}</a>
    <span v-else>{{thing.text}}</span>
  </div>
</template>

我不喜欢这样，因为thing.text实际上可能有很多东西（不仅仅是文本）。

此外，我不喜欢呈现锚标记的冗余，即是否有href是带有href的锚标记。

因此，我想像这样缩短并清理它：

<template>
  <div>
    <div :is="complexThing.href ? 'a' : 'span'" :href="complexThing.href">{{complexThing.lotsOfStuff}}</div>
  </div>
</template>

这很好，我们只停留在一行，但要付出href在不存在的情况下被束缚的代价……

那么有没有办法有条件地绑定道具？

当然，我可以将此约定包装到它自己的组件中。但是，我发现它是什么，很大程度上取决于我在其中使用的组件。我不喜欢为了获取href而不得不在if-else语句之间复制并粘贴大量相同的代码。

有什么想法吗？想法？

例如

<template>
  <div :is="href ? 'a' : or" :href="href">
  <!-- href=(unknown) will show in inspector if href is undefined -->
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'AnchorOr',
  props: ['or', 'href']
}
</script>

<style>

</style>

然后可以像这样使用：

<AnchorOr class="inline-text" :or="span">{{text}}</AnchorOr>
<AnchorOr class="linked-module" :or="div">{{component}}</AnchorOr>

Answer 1

在您的小示例中，我将其保持原样；但是，如果{{ thing.text }}是较大的模板部分，那么复制它是不可以的。

通常在以下情况下使用<component>：

<component v-bind="thingProps">{{ thing.text }}</component>

computed: {
  thingProps() {
    return this.thing.href
      ? { is: 'a', href: this.thing.href }
      : { is: 'span' };
  }
}

Vue：动态组件中的条件道具约定？

1 个答案: