v-model在vue 3穿梭框中通过modelvalue prop接收并用update:modelvalue事件同步右侧选中key数组；支持自定义名如myvalue，需声明对应prop与事件；值须为key集合，结构适配靠数据源映射；可延迟提交，用临时状态+确定按钮触发更新。
v-model 在 Vue 3 中处理穿梭框组件的双向数据，核心是把右侧选中项作为绑定值，通过自定义事件同步更新父组件状态。它不是自动生效的“黑盒”，而是靠约定好的 prop 名和事件名协同工作。
穿梭框 v-model 的默认行为
使用 Element Plus 的 el-transfer 时，v-model 默认绑定的是右侧列表的 key 数组（即选中项的唯一标识）：
- 父组件写法：
<el-transfer v-model="value" :data="list"></el-transfer> - 子组件接收：
modelValueprop 接收当前选中 key 列表 - 子组件触发：
emit('update:modelValue', newValue)通知父组件更新
此时 value 是一个数组，比如 [1, 3, 5]，代表右侧已选中的三项。
自定义 v-model 名称（如 myValue）
当穿梭框封装为自定义组件（如 HomeView），需支持类似 v-model:myValue 的用法：
- 父组件传值：
<homeview v-model:myvalue="transferValue"></homeview> - 子组件声明 prop：
myValue: { type: Array, default: () => [] } - 子组件触发事件：
emit('update:myValue', selectedKeys) - 内部响应式变量建议用
ref(props.myValue)初始化，并配合watch响应父级 prop 变化（尤其异步数据场景）
值传递与结构适配的关键点
穿梭框的数据源通常含 key 和 label 字段，但业务数据可能结构不同（如用 id 和 phone_name）：
- 确保传给穿梭框的
data数组每一项都有明确的key（或通过props配置映射，如{ key: 'id', label: 'phone_name' }） -
v-model绑定的值必须是key的集合，不能直接传对象数组 - 若需回传完整对象，应在父组件根据 key 查找原始数据，而非让穿梭框组件承担转换逻辑
点击确定后才提交选中值的实现逻辑
有些业务要求不实时同步，而是点击“确定”按钮后才更新绑定值：
- 子组件内部维护一个临时选中状态（如
const localSelection = ref([])） - 穿梭框的
right-check-change事件只更新localSelection，不触发update:xxx - 点击确定时，调用
emit('update:myValue', localSelection.value) - 可暴露
clear()方法供父组件重置内部状态（如示例中transferRef.value.clear()）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
