toggle 不是原生 HTML 事件，浏览器不派发该事件；Vue 中的 toggle 行为本质是对 change、click 等标准事件或内部状态切换的封装，应以响应式布尔值为单一数据源驱动 UI 和逻辑。
toggle 不是原生 HTML 事件，也没有 onToggle 这样的 DOM 事件监听器。你在 Vue 项目里看到的 “toggle 行为”，本质都是对 input[type="checkbox"] 的 change 事件、click 事件或组件内部状态切换逻辑的封装结果。
为什么直接监听 toggle 会失败
浏览器不派发名为 toggle 的事件。试图写 @toggle="handler" 或 addEventListener('toggle', ...) 都不会触发——它根本不存在。常见误判场景包括：
- 把 Ionic 的
ionChange当成通用事件（仅限<ion-toggle></ion-toggle>组件） - 把 Element UI 的
toggleRowSelection方法当成事件（它是方法调用，不是事件） - 把 Bootstrap-Vue 的
v-b-toggle指令当成事件监听器（它是指令，用于控制折叠，不 emit 事件）
真正能监听的，只有底层触发的 change（复选框）、click（按钮）、input（受控输入）等标准事件。
Vue 中实现「视觉 toggle + 逻辑联动」的可靠路径
核心原则：用一个响应式布尔值作为单一数据源，所有 UI 表现和行为都基于它驱动。不要靠事件“猜状态”。
立即学习“前端免费学习笔记（深入）”；
典型组合方式：
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 模板中用
<input type="checkbox" v-model="isActive">或<el-switch v-model="isActive"></el-switch> - 联动组件通过
v-if="isActive"、:class="{ active: isActive }"、:disabled="!isActive"等直接读取该值 - 需要副作用时，在
watch或@change回调里执行逻辑，而不是在事件里重新计算状态
例如，开关控制侧边栏显示：
<el-switch v-model="sidebarOpen" />
<aside v-show="sidebarOpen">...</aside>
<div :class="{ 'overlay-active': sidebarOpen }"></div>
这样比监听某个“toggle click”再手动设 sidebarOpen = !sidebarOpen 更健壮，也避免竞态。
跨组件 toggle 联动时容易漏掉的关键点
父子或兄弟组件间共享 toggle 状态，最容易出问题的地方不是语法，而是响应式失效链：
- 父组件传
:open="sidebarOpen"给子组件，但子组件没用props声明或用了const open = defineProps().open却没加default，导致初始 undefined - 子组件想反向控制父状态，却直接改
props.open = true—— Vue 3 会警告，且不触发更新 - 用
emit实现双向绑定时，忘了在父组件用v-model:open="sidebarOpen"，只写了@update:open，导致 v-model 语义断裂 - 多个组件依赖同一状态，但用的是不同 ref（比如一个用
ref(false)，另一个用computed(() => store.sidebarOpen)），实际不是同一响应式源头
最稳妥的做法：把 toggle 状态提到共同祖先（如 Pinia store 或 provide/inject），所有组件只读+ emit 通知，不各自维护副本。
复杂点在于，很多 UI 库的 toggle 类组件（如 <el-switch></el-switch>、<ion-toggle></ion-toggle>）默认只管自身视觉和本地状态，联动逻辑必须由你显式桥接。没人替你自动同步「开关开了」和「列表刷新了」这两件事——这是业务逻辑，不是框架职责。
