多个相同子组件实例状态互相干扰的本质是共享了不该共享的状态源；解决关键是父组件为每个实例分配独立状态变量（如isModal1Open）、用唯一ID区分事件上下文、子组件封装自身状态并仅暴露受控接口，从源头实现状态隔离。
多个相同子组件实例之间状态互相干扰，本质是共享了不该共享的状态源。解决的关键不是“阻止干扰”，而是从设计上杜绝共享——让每个实例拥有专属状态路径和明确的通信边界。
父组件为每个实例分配独立状态变量
最直接有效的方式，是在父组件中为每个子组件显式声明独立的状态字段。不复用同一个 ref 或 reactive 属性，避免“一个开关控制所有弹窗”这类错误。
- 例如两个开关组件，用 isModal1Open 和 isModal2Open 分别控制，而非共用 isModalOpen
- 若子组件来自循环渲染（如 v-for），用数组或对象存储状态：modalStates[index] = true 或 modalStates[id] = true
- 配合 key 属性确保 Vue 正确识别实例差异，比如 <Modal :key="item.id" ...>
子组件封装自身状态，仅暴露受控接口
子组件内部应避免自行维护影响父级逻辑的状态（如是否已提交、是否处于加载中）。它只负责 UI 行为，并通过事件将意图通知父组件，由父组件决定如何响应。
- 子组件接收 value 和 onUpdate:value（或 @update:value），实现 v-model 兼容
- 点击“复制”按钮时，子组件 emit('copy-request', id)，而不是自己设 isCopied = true
- 父组件统一管理 copiedId，再通过 props 下发当前高亮状态，保证互斥性
用唯一标识符区分事件与回调上下文
当多个子组件触发同类事件（如保存、删除、切换），父组件必须能准确识别“是谁在操作”。靠顺序索引不可靠，应使用稳定、可追溯的标识。
- 子组件 emit 事件时附带唯一 ID：this.$emit('submit', { id: this.itemId, data })
- 父组件监听时不做全局响应，而是查找对应项更新：formStates[itemId].isSaving = true
- Provide/Inject 场景下，inject 的 key 加作用域前缀，如 'editor-form-state-123'，避免跨实例覆盖
避免隐式共享：静态变量、全局对象、单例 store
有些状态看似“属于组件”，实则被多个实例悄悄共用。常见陷阱包括：
- 在组件类中定义 static counter = 0 —— 所有实例递增同一变量
- 直接修改从父组件传入的对象属性：props.user.name = 'new' —— 父组件和其他子组件立刻感知变更
- 多个子组件都调用同一个 Pinia store 实例，且未按 tab 或 id 划分模块 —— 数据混杂、清理困难
