Vue slots, select страны?

Question

[Voindf]

Привет, у меня есть компонент

<CustomSelectWithImages  :options="countries">
<template #option="country">{{ country.name }}</template>
</CustomSelectWithImages>

Как во vue 3
сделать слот что б он позволял творить всякие штучки с элементом #option="country"
к примеру вывести ее название
нигде не смог найти пример

Answer 1

[0xD34F]

Внутри компонента:

<select>
  <template v-for="n in options">
    <option>
      <slot name="option" :option="n">{{ n }}</slot>
    </option>
  </template>
</select>

Снаружи:

<v-select :options="countries">
  <template #option="{ option }">{{ option.name }}</template>
</v-select>

https://jsfiddle.net/w6nuzamx/

Comments

[Voindf]

Позвольте пожалуйста спросить, как добавить типы к данной конструкции в typescript

[Дима Паутов]

Voindf, https://vuejs.org/api/sfc-script-setup.html#defineslots