多个模板插槽的相同插槽内容

Question

在vuejs中，有没有办法不用复制粘贴就可以为多个slot设置相同的内容？

所以这个：

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

见working example。

多个模板插槽的相同插槽内容

Same slot content for multiple template slots

javascript

vue.js

vue-multiselect