Одинаковый контент для нескольких шаблонов

Question

В vuejs, есть ли способ установить один и тот же контент для нескольких слотов без вставки копий?

Итак, это:

<base-layout>
  <template slot="option">
    <span :class="'flag-icon-'   props.option.toLowerCase()" />{{ countriesByCode[props.option] }}
  </template>

  <template slot="singleLabel">
    <span :class="'flag-icon-'   props.option.toLowerCase()" />{{ countriesByCode[props.option] }}
  </template>
</base-layout>

Можно написать так:

<base-layout>
  <template slot="['option', 'singleLabel']">
    <span :class="'flag-icon-'   props.option.toLowerCase()" />{{ countriesByCode[props.option] }}
  </template>
</base-layout>

Большое спасибо.

Answer 1

Вы можете попробовать использовать v-forдля этого.

<base-layout>
  <template :slot="slotName" v-for="slotName in ['option', 'singleLabel']">
    <span :class="'flag-icon-'   props.option.toLowerCase()" />{{ countriesByCode[props.option] }}
  </template>
</base-layout>

Смотрите рабочий пример.