Vue 3 组件化与父子组件通信一、为什么需要组件化当一个页面同时包含头部、侧栏、三维视口、播放控制、预警列表和历史快照时如果全部放在一个.vue文件中会出现模板过长状态和函数难以定位同类代码无法复用修改一个区域容易影响其他区域测试和维护成本增加。Vue 的核心思想之一就是把页面拆成组件树TwinPage.vue ├─ TwinHeader.vue ├─ HeatStatusPanel.vue ├─ TwinViewport.vue ├─ PlaybackControls.vue ├─ WarningList.vue └─ HistorySnapshot.vue二、页面组件与子组件页面组件通常与 URL 对应负责读取路由组织页面布局请求主要数据协调多个子组件。子组件通常负责某个独立区域展示一组状态卡封装播放按钮显示历史快照封装图表或三维视口。不是所有.vue都需要路由配置。三、创建第一个子组件StatusCard.vuetemplate article classstatus-card span{{ label }}/span strong{{ value }}/strong /article /template script setup langts defineProps{ label: string; value: string; }(); /script父组件中导入importStatusCardfrom./StatusCard.vue;模板中使用StatusCard label钢液温度 value1650 °C /在script setup中导入后可以直接在模板使用不需要额外注册。四、父组件通过props传值子组件interfaceHistoryState{timestamp:string;temperature:number|null;risk:normal|warning|critical;}constpropsdefineProps{state:HistoryState;}();模板中p时间{{ props.state.timestamp }}/p在模板中也可以直接写p时间{{ state.timestamp }}/p父组件HistorySnapshot :statehistorySnapshotState /冒号表示传入的是 JavaScript 表达式而不是固定字符串。五、Props 应该是只读的子组件不应该直接修改父组件传入的值props.state.temperature1700;// 不推荐正确思路展示数据直接使用 Props需要局部编辑复制到子组件自己的状态需要真正改变父状态向父组件发出事件。六、Props 默认值使用类型声明时可以配合withDefaultsconstpropswithDefaults(defineProps{title?:string;loading?:boolean;}(),{title:状态面板,loading:false});七、子组件通过emit通知父组件子组件template button clickselectRealtime实时模式/button /template script setup langts const emit defineEmits{ changeMode: [mode: realtime | playback]; }(); function selectRealtime() { emit(changeMode, realtime); } /script父组件ModeSwitch change-modehandleModeChange /functionhandleModeChange(mode:realtime|playback){displayMode.valuemode;}事件名在 TypeScript 中可以使用驼峰模板中通常使用短横线形式。八、使用v-model封装双向交互组件父组件PlaybackSlider v-modelplaybackIndex /子组件constmodeldefineModelnumber({required:true});模板input v-model.numbermodel typerange /在较早或更显式的写法中v-model等价于PlaybackSlider :model-valueplaybackIndex update:model-valueplaybackIndex $event /九、插槽slot当组件负责外壳但内部内容由父组件决定时可以使用插槽。子组件template section classpanel header{{ title }}/header div classpanel-body slot / /div /section /template父组件PanelShell title风险态势 RiskSummary / /PanelShell具名插槽template headerslot nameheader //header mainslot //main footerslot namefooter //footer /template十、父组件调用子组件方法大多数情况下应优先使用 Props 和事件。但第三方视口、表单校验等场景可能需要暴露方法。子组件functionresetView(){// 重置内部视角}defineExpose({resetView});父组件constviewportRefrefInstanceTypetypeofTwinViewport();functionhandleReset(){viewportRef.value?.resetView();}模板TwinViewport refviewportRef /不要把defineExpose当成主要通信方式否则父子组件会过度耦合。十一、什么时候应该拆分组件适合拆分页面区域具有清晰边界组件可以在多个页面复用区域拥有独立状态或生命周期模板和逻辑已经很长可以通过少量 Props 和事件完成通信。不一定适合拆分只有几行静态 HTML拆分后需要传几十个 Props子组件无法形成独立职责数据和行为完全依赖父组件内部细节。十二、组件与.ts模块怎样选择使用.vue组件当功能包含独立模板用户交互局部样式自己的生命周期。使用.ts模块当功能主要是纯数据转换类型定义业务规则API 请求工具函数不依赖模板的渲染逻辑。例如HistorySnapshot.vue 展示历史快照 snapshotState.ts 根据原始信号构造快照状态这种拆分能够让组件保持清晰。十三、一个完整父子通信案例子组件PlaybackControls.vuetemplate div classplayback-controls button clickemit(step, -1)上一步/button button clickemit(toggle) {{ playing ? 暂停 : 播放 }} /button button clickemit(step, 1)下一步/button span{{ index 1 }} / {{ total }}/span /div /template script setup langts defineProps{ playing: boolean; index: number; total: number; }(); const emit defineEmits{ toggle: []; step: [offset: number]; }(); /script父组件PlaybackControls :playingisPlaying :indexplaybackIndex :totalframes.length toggletogglePlayback stepstepPlayback /这里形成清晰边界父组件保存真实播放状态 子组件只负责展示按钮并报告操作十四、常见误区1. 子组件直接修改 Props破坏单向数据流。2. 所有状态都提升到父组件局部交互状态可以留在子组件内部。3. 一个页面拆成几十个极小组件组件数量增加并不等于架构更好。职责清晰才是重点。4. 使用全局状态替代所有 Props跨层级共享状态可以使用 Pinia但父子之间的简单数据仍应优先使用 Props 和事件。5. 父组件通过 Ref 控制子组件所有细节会形成强耦合。优先使用声明式 Props。十五、本章小结Vue 组件通信的基本方向是父组件 → Props → 子组件 父组件 ← Emits ← 子组件大型页面负责协调子组件负责局部展示和交互纯数据规则继续放在.ts模块中。下一章将学习 Vue 项目中常见的 TypeScript 类型设计。