折叠面板通过 emit 事件向父组件同步展开/收起状态，推荐使用 update:expanded 事件名以兼容 v-model；父组件监听该事件并更新自身状态，实现单向数据流与受控/非受控模式兼容。
折叠面板通过 emit 向父级反馈展开/收起状态，核心是让子组件在用户交互（如点击标题）后，主动通知父组件“当前状态变了”，而不是让父组件去猜测或轮询。
明确状态变更时机并 emit 对应事件
子组件内部维护一个本地 isExpanded 响应式变量，点击触发切换，并立即 emit('update:expanded', isExpanded) 或更语义化的 emit('toggle', isExpanded)。不依赖 props 双向绑定，而是由父组件决定是否响应、如何响应。
- 推荐使用
update:xxx事件名，与 v-model 机制对齐，便于后续升级为 v-model 支持 - 若仅需通知动作（如“用户点了展开”），可用
emit('expand')和emit('collapse')分开事件 - 务必在
isExpanded更新后 emit，确保父组件收到的是最新状态
父组件监听并同步管理状态
父组件用 @update:expanded="handleExpand" 接收事件，把新值存入自己的响应式数据中。这样既保持单向数据流，又实现状态可控。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 如果父组件需要联动其他逻辑（如展开时滚动到该面板、收起时清空内部表单），都在
handleExpand中统一处理 - 避免在父组件里直接修改子组件的 ref 或内部变量——那会破坏封装性
- 多个折叠面板共存时，建议在 emit 中携带唯一标识（如
emit('update:expanded', { id: 'panel-1', expanded: true })），方便父组件精准更新
支持受控模式与非受控模式兼容
子组件可同时支持两种使用方式：父组件传入 expanded prop 并监听更新（受控），或完全由子组件自己管理状态（非受控）。关键在于判断 prop 是否存在且为响应式。
立即学习“前端免费学习笔记（深入）”；
- 子组件内用
const isControlled = toRef(props, 'expanded') !== undefined判断是否受控 - 受控时，
isExpanded应基于 props 计算；非受控时，才用本地 ref 管理 - 无论哪种模式，每次 toggle 都要 emit，保证父组件始终能感知变化
配合动画与加载状态反馈
真实项目中，展开/收起常伴随内容加载（如异步获取详情）或 CSS 过渡。这时可在 emit 中附带额外上下文，帮助父组件协调 UI。
- 例如
emit('expand-start')表示动画开始，父组件可提前禁用相关按钮 - 加载完成后再
emit('expand-ready')，父组件据此显示内容或移除 loading 提示 - 错误时
emit('expand-error', err)，由父组件统一提示，避免子组件重复处理
