效果展示：
分成父子组件，进行组件间的传值。
子组件：
<template><div class="select-custom"><!-- 输入框 --><div class="input-container" @click="handleSelectContent"><div><div class="input">{{ selectList.value }}</div></div><div class="input-icon"><el-icon><ArrowDown /></el-icon></div></div><div ref="selectContent" style="display: none" class="select-content"><div v-for="(item, index) in selectList.list" :key="index"><div class="show-item" @click="handleCheck(item.value)">{{ item.value }}</div></div></div></div></template><script setup>import { ref } from "vue";// 获得父组件的传值const props = defineProps(['selectList']);const selectList = props.selectList;// 给父组件传值const emit = defineEmits(['handleCheckData'])// 获得下拉框const selectContent = ref("");// 展示const handleSelectContent = () => {selectList.isShow = !selectList.isShow;if (selectList.isShow) {selectContent.value.style.display = "block";} else {selectContent.value.style.display = "none";}};// 选择下拉框的数据const handleCheck = (data) => {selectList.value = data;// 给父组件传值emit('handleCheckData',data)};</script><style scoped>.input-container {width: 150px;height: 30px;display: flex;border: 1px solid RGB(213, 215, 218);border-radius: 5px;background: #fff;color: #999999;}.input {display: flex;align-items: center;justify-content: flex-start;width: 120px;height: 100%;padding-left: 10px;color: RGB(99, 103, 111);}.input-icon {display: flex;justify-content: center;align-items: center;background: #fff;}.select-content {background: #fff;border: 1px solid RGB(213, 215, 218);border-top: 0;border-radius: 5px;color: #999999;}.show-item {padding: 5px;}.show-item:hover {color: black;font-weight: bold;background: RGB(238, 240, 245);}</style>
父组件：
<template><div class="post"><div class="top"><div class="search"><div class="search-input"><el-input v-model="input1" class="w-50 m-2" :suffix-icon="Search" /></div><div class="select"><select-custom:select-list="selectList"@handle-check-data="handleCheckData"></select-custom></div></div><div><el-button type="primary">创建职位</el-button></div></div></div></template><script setup>// 界面import selectCustom from "@/components/common/select-custom.vue";import { Search } from "@element-plus/icons-vue";import { ref, reactive } from "vue";const input1 = ref("");const selectList = reactive({value: "不限",isShow: false,list: [{ value: "不限" }, { value: "在招" }, { value: "已结束" }],});const handleCheckData = (data) =>{// 得到修改后的selectList.value的值console.log(data,'data');}</script><style scoped>.top {display: flex;justify-content: space-between;padding: 20px;}.search {display: flex;justify-content: center;align-self: start;}.select {margin-left: 30px;}</style>
要注意的点是，我使用父组件给子组件传值，我使用的是数组，在vue中，使用数组中的属性，数组的属性是可以随便修改，不会报不能修改的错误。
还有就是在子组件修改selectList.value的值的时候，会给父组件返回一个方法，可以实现得到修改后的值，父组件这个值修改后要进行的操作可以在这个函数中进行。
