Vue3中如何让自定义下拉选择组件支持v-model双向绑定？

安全阿岳

2026-10-5

实现方案

完全可以实现，v-model本质是属性绑定+事件监听的语法糖，只需对子组件做少量调整即可，分Vue3和Vue2两种场景说明：

Vue3 配置步骤

子组件新增接收modelValue属性，这是v-model默认绑定的属性名
选中时触发update:modelValue事件抛出选中值，替换原有selected事件即可，若需要保留原事件可同时触发两个事件

子组件示例代码（script setup写法）

<script setup>
const props = defineProps({
  items: {
    type: Array,
    required: true
  },
  // 新增v-model对应的接收属性
  modelValue: {
    type: [String, Number, Object], // 根据你实际选中值的类型调整
    default: null
  }
})
const emit = defineEmits(['update:modelValue', 'selected']) // 保留selected可兼容旧写法

// 原有选中触发逻辑
const handleSelect = (get) => {
  emit('update:modelValue', get) // 给v-model用的事件
  emit('selected', get) // 可选，保留原有事件供其他场景使用
}
</script>

父组件调用写法

<DropdownSelect :items="items" v-model="something" />

绑定的something变量即可直接拿到子组件的选中值。

Vue2 配置步骤

子组件新增接收value属性，这是Vue2 v-model默认绑定的属性名
选中时触发input事件抛出选中值

子组件示例代码

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true
    },
    // 新增v-model对应的接收属性
    value: {
      type: [String, Number, Object], // 根据实际选中值类型调整
      default: null
    }
  },
  methods: {
    handleSelect(get) {
      this.$emit('input', get) // 给v-model用的事件
      this.$emit('selected', get) // 可选，保留原有事件
    }
  }
}
</script>