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公司 当它不存在的时候,什么都没有。。。

那么有没有办法 道具?

思想?思想?

例如

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