Vue3可复用Selectbox下拉框与父组件双向绑定实现问题求助

实现方案 #

问题根因 #

你已经正确在子组件触发了update:selectedOption事件，但父组件没有监听该事件，所以selectedRole不会自动更新。另外不能直接在子组件给selectedOption绑定v-model，因为Prop是单向只读的，子组件内部不能直接修改父组件传递的Prop，不符合单向数据流规则。

方案1：使用.sync语法糖（最少改动） #

.sync是Vue内置的语法糖，会自动监听update:Prop名格式的事件，同步更新父组件绑定的变量，仅需要修改父组件的子组件调用代码：

<template>
    <!-- 给selectedOption绑定添加.sync修饰符 -->
    <Selectbox :selectedOption.sync="selectedRole" :options="roles" />
    <span>SelectedRole: {{ selectedRole }}</span>
</template>

子组件代码不需要任何改动，即可正常实现双向绑定。

方案2：适配标准v-model规范（更推荐，复用性更强） #

改造后子组件的用法和原生表单元素完全一致，更符合通用组件的使用习惯。

子组件修改：

<template>
    <select :value="value" @input="$emit('input', $event.target.value)">
        <option v-for="option in options" :value="option.value" :key="option.value">{{ option.label }}</option>
    </select>
</template>

<script>
export default {
    props: {
        options: {
            type: Array,
            required: true,
        },
        // 适配v-model默认绑定的value Prop
        value: {
            type: String,
            required: false,
            default: ''
        },
    },
};
</script>

父组件调用修改：

<template>
    <!-- 直接用v-model绑定，和原生select用法一致 -->
    <Selectbox v-model="selectedRole" :options="roles" />
    <span>SelectedRole: {{ selectedRole }}</span>
</template>

内容的提问来源于stack exchange，提问作者Thore