Javascript 如何在Vue 3中创建自定义 Select 组件，并将选项作为HTML而不是props 传递

您可以创建自定义插槽渲染函数并收集插槽子组件的默认插槽:

VUE SFC PLAYGROUND个

通常我更喜欢我的另一个答案中发布的作用域插槽解决方案，但没有人会停止将2个解决方案合并为1:使用这里的默认插槽和另一个答案的#option.因此，所选组件可以由两个插槽馈电.

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

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

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