Vue 3 中 v-model 绑定矩阵评分组件需遵循 modelValue prop 与 update:modelValue 事件约定，推荐用对象如 {row1: 3, row2: 1} 记录每行选中列，并通过 computed 或 defineModel 实现安全双向同步。
Vue 3 中 v-model 绑定矩阵评分组件，核心是让组件支持“一个值进、一个事件出”的约定，并适配矩阵类交互的多维结构（比如 5×5 表格中每行选一项）。它不是直接绑定单个数字，而是绑定一个能反映用户选择状态的数据结构——通常是对象或数组。
明确 v-model 默认行为：modelValue + update:modelValue
子组件必须接收 modelValue prop（类型建议为 Object 或 Array），并在用户操作后通过 emit('update:modelValue', newValue) 通知父组件更新。矩阵评分往往需要记录“每行选了哪一列”，所以推荐用对象形式：
- 例如：
{ row1: 3, row2: 1, row3: 4 }表示第 1 行选第 3 列、第 2 行选第 1 列…… - prop 声明要写清楚默认值，避免 undefined 导致渲染异常：
modelValue: { type: Object, default: () => ({}) } - 用
defineEmits(['update:modelValue'])显式声明事件，利于类型检查和 IDE 提示
用 computed 实现安全的双向同步
不要直接修改 props，而是用 computed 包一层读写逻辑，既保持响应式，又避免意外 mutation：
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- get 返回
props.modelValue - set 触发
emit('update:modelValue', newValue) - 这样组件内部可自由操作这个计算属性，比如点击某格时执行
selectedRow[rowId] = colIndex
模板中按矩阵逻辑渲染并绑定交互
矩阵评分通常由多行选项组成，每行是一个独立的选择项。关键点是：
立即学习“前端免费学习笔记（深入）”；
- 用
v-for渲染行和列，每格加@click或@change - 点击某格时，更新对应行的选中值，并触发 model 更新
- 已选中的格子通过
:class或:style高亮，依据是selectedRow[rowId] === colIndex - 不需要给每个 input 写
v-model，因为这不是原生表单控件堆叠，而是自定义交互逻辑
Vue 3.4+ 推荐：用 defineModel() 简化代码
如果矩阵结构固定、只绑定一个主状态（如上述对象），defineModel() 是最简洁方案：
- 一行声明：
const model = defineModel() - 内部直接读写
model.value.row1 = 2，自动同步到父组件 - 点击处理函数里只需改
model.value，无需手动 emit - 注意：defineModel 默认绑定 modelValue，不支持多个字段；如需扩展（比如同时绑定“是否启用”开关），仍需回退到 props + emits 方案
