Как создать пользовательский компонент выбора с параметрами, передаваемыми в виде HTML вместо реквизита в Vue 3?

Настройка элементов списка обычно выполняется с помощью слотов с ограниченной областью действия:

ИГРОВАЯ ПЛОЩАДКА VUE SFC

<script setup>
import { ref } from 'vue'
import MySelect from './MySelect.vue';

const options = [{id: "1", title: 'Option 1'}, {id: "2", title: 'Option 2'}];
const selected = ref();
</script>

<template>
  <my-select :options #option = "{id, title, select}" v-model = "selected">
    <div class = "option" @click = "select">id: {{ id }}, title: {{ title }}</div>
  </my-select>
</template>

<style scoped>
.option{
  padding: 5px 10px;
  border: 1px solid gray;
  border-radius: 4px;
  cursor: pointer;
}
</style>

MySelect.vue:

<template>
    <div class = "select">
        <div class = "text" @click = "visible=!visible" style = "cursor:pointer">{{modelValue ? options.find(o => o.id === modelValue).title : text}}</div>
        <div class = "options" v-if = "visible">
            <template v-for = "option in options">
              <slot name = "option" v-bind = "{...option, select: () => select(option.id)}">
                <span class = "p-4 hover:bg-neutral-1 cursor-pointer capitalize" @click = "select(option.id)">{{option.title}}</span>
              </slot>
            </template>
        </div>
    </div>
</template>

<script setup>
import {ref} from 'vue';
const visible = ref(false)
const props = defineProps({
    text: {type: String, default: 'Toggle dropdown'},
    options: Array,
    modelValue: String
})
const emit = defineEmits(["update:modelValue"])

function select(option){
    visible.value = false;
    emit("update:modelValue", option)
}
</script>

Вы также можете автоматически обрабатывать щелчок выбора, но для этого вам понадобится специальный компонент слота для параметров рендеринга. Кроме того, вы можете использовать свой собственный компонент для перехода в слот:

ИГРОВАЯ ПЛОЩАДКА VUE SFC

<script setup>
import { ref } from 'vue'
import MySelect from './MySelect.vue';
import MyOption from './MyOption.vue';

const options = [{id: "1", title: 'Option 1'}, {id: "2", title: 'Option 2'}];
const selected = ref();
</script>

<template>
  <my-select :options #option = "{id, title}" v-model = "selected">
    <my-option :value = "id">{{ title }}</my-option>
  </my-select>
</template>

MySelect.vue

<template>
    <div class = "select">
        <div class = "text" @click = "visible=!visible" style = "cursor:pointer">{{modelValue ? options.find(o => o.id === modelValue).title : text}}</div>
        <div class = "options" v-if = "visible">
            <template v-for = "option in options">
              <render-option v-if = "$slots.option" v-bind = "option" @click = "select(option.id)"/>
              <span v-else class = "p-4 hover:bg-neutral-1 cursor-pointer capitalize" @click = "select(option.id)">{{option.title}}</span>
            </template>
        </div>
    </div>
</template>

<script setup>
import {ref, useSlots, mergeProps} from 'vue';
const visible = ref(false)
const props = defineProps({
    text: {type: String, default: 'Toggle dropdown'},
    options: Array,
    modelValue: String
})
const emit = defineEmits(["update:modelValue"])

const $slots = useSlots();
const renderOption = props => $slots.option(props)
    .map(vnode => (Object.assign(vnode.props ??= {}, {onClick: () => select(props.id)}, vnode.props ?? {}), vnode));

function select(option){

    visible.value = false;
    emit("update:modelValue", option)
}
</script>

MyOption.vue

<script setup>

</script>

<template>
  <div class = "option">
    <slot></slot>
  </div>
</template>
<style scoped>
.option{
  padding: 5px 10px;
  border: 1px solid gray;
  border-radius: 4px;
  cursor: pointer;
}
</style>

Вы можете создать собственную функцию рендеринга слотов и собирать слоты по умолчанию для дочерних компонентов с слотами:

ИГРОВАЯ ПЛОЩАДКА VUE SFC

Обычно я бы предпочел решение с ограниченным слотом, опубликованное в моем другом ответе здесь, НО никто не мешает ОБЪЕДИНИТЬ 2 решения в 1: использовать слот по умолчанию отсюда и #option из другого ответа. Таким образом, компонент выбора может питаться обоими слотами.

<script setup>
import { ref } from 'vue'
import MySelect from './MySelect.vue';
import MyOption from './MyOption.vue';

const selected = ref();
</script>

<template>
  <my-select v-model = "selected">
    <my-option value = "1"><span style = "color:red">Red option</span></my-option>
    <my-option value = "2"><span style = "color:blue">Blue option</span></my-option>
  </my-select>
</template>

MySelect.vue

<template>
    <div class = "select">
        <div class = "text" @click = "visible=!visible" style = "cursor:pointer">
            <component v-if = "modelValue" :is = "options[modelValue]"/>
            <template v-else>{{ text }}</template>
        </div>
        <div class = "options" v-if = "visible">
            <render-options></render-options>
        </div>
    </div>
</template>

<script setup>
import {ref, useSlots} from 'vue';
const visible = ref(false)
const props = defineProps({
    text: {type: String, default: 'Toggle dropdown'},
    options: Array,
    modelValue: String
})
const options = ref({});
const emit = defineEmits(["update:modelValue"])

const $slots = useSlots();
const renderOptions = () => {
    options.value = {};
    return $slots.default()
    .map(vnode => {
        // collection options' default slot
        options.value[vnode.props.value] = vnode.children.default;
        Object.assign(vnode.props ??= {}, {onClick: () => select(vnode.props.value)}, vnode.props ?? {});
        return vnode;
    });
}

function select(option){
    visible.value = false;
    emit("update:modelValue", option)
}
</script>

MyOption.vue

<script setup>

</script>

<template>
  <div class = "option">
    <slot></slot>
  </div>
</template>
<style scoped>
.option{
  padding: 5px 10px;
  border: 1px solid gray;
  border-radius: 4px;
  cursor: pointer;
}
</style>