ref控制评分星星组件的核心是父组件主动设置子组件内部状态，需子组件通过defineExpose暴露setScore等方法，并在onMounted后调用starRef.value.setScore(3.5)确保生效。
用 ref 控制评分星星组件的当前星级，核心是让父组件能**主动设置子组件内部状态**，而不是只靠子组件自身响应用户交互。这适用于初始化默认值、外部按钮重置、表单联动等场景。
ref 必须指向子组件实例（不是 DOM 元素）
确保你在模板中给组件加了 ref，且子组件正确导出并暴露了可修改星级的方法或响应式属性：
- 子组件需定义一个可被外部调用的方法（如
setScore(score)），或声明一个score的defineExpose（Vue 3）/provide（Vue 2） - 不要写成
<StarRating ref="rateRef" />却在子组件里没做任何暴露 —— 这样rateRef.value是个空对象或仅含 DOM 引用 - 推荐 Vue 3 写法：子组件用
defineExpose({ setScore, score })显式暴露能力
Vue 3 中 ref 控制星级的典型流程
假设你用的是自定义 StarRating 组件（非第三方库），步骤如下：
- 父组件模板：
<StarRating ref="starRef" /> - 父组件脚本：
const starRef = ref(null)，并在onMounted后调用starRef.value.setScore(3.5) - 子组件内需有方法：
function setScore(val) { currentScore.value = val }，并用defineExpose({ setScore }) - 若需响应式同步，还可暴露
score的 getter/setter，或直接 exposecurrentScore（需注意响应性穿透）
配合 v-model 实现双向 ref 控制
如果组件已支持 v-model（如 vue-star-rating），ref 更适合「读取」或「触发更新」，而非绕过响应式系统直接改内部值：
立即学习“前端免费学习笔记（深入）”；
- 绑定
v-model="rating"，同时用ref获取组件实例用于调用方法（如reset()） - 想强制设值？直接改
rating = 4即可，ref在这里更多是辅助操作，不是唯一入口 - 某些组件（如官方示例）提供
setValue(val)方法，这时starRef.value.setValue(4.2)就是标准用法
常见踩坑点
ref 控制失效，往往不是语法错，而是逻辑断层：
-
ref在setup里声明但没 return 出去 → 模板无法绑定 - 子组件未用
defineExpose→ref.value是undefined - 调用
setScore时组件尚未挂载（比如在created阶段就调）→ 加nextTick或onMounted保险 - 传入非数字（如字符串
"4"）导致计算异常 → 建议统一转Number(val)
