Vue: соглашение для условного реквизита в динамических компонентах?

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 ничто не связано, когда его не существует ...

Так есть ли способ условно связать опору?

Конечно, я мог бы обернуть это соглашение в отдельный компонент. Тем не менее, я обнаружил, что это очень зависит от компонента, в котором я его использую. Мне не нравится копировать и вставлять кусок идентичного кода между оператором if-else просто для получения 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>

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' };
  }
}