折叠面板通过 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 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章