默认布局：主题设置组件事件传递
ThemeSettings 组件内部的 reactive 对象会实时响应用户操作，但其他组件如何获取这些变化？本节解决的核心问题是：当用户在 Drawer 中修改设置并关闭时，如何将修改后的数据传递给 Layout 及其子组件。
数据流分析
ThemeSettings 组件的数据流是这样的：
用户操作 ColorPicker/Switch/Slider
→ reactive form 对象实时更新
→ Vue DevTools 中可以看到 props 数据变化
→ 用户关闭 Drawer
→ 触发 close 事件
→ 将 form 数据 emit 出去
text
关键洞察：不需要在每个控件上绑定 @change 事件，因为 reactive 对象本身已经实时更新。只需要在 Drawer 关闭时，将整个 form 对象一次性发出。
close 事件的实现
// theme-settings.vue
const emit = defineEmits<{
close: [settings: Settings]
}>()
const handleClose = () => {
emit('close', { ...form })
}
typescript
Drawer 的 close 事件绑定：
<el-drawer v-model="drawer" @close="handleClose">
vue
注意使用 { ...form } 展开运算符创建新对象，而不是直接传递 form 引用。这样做是为了避免父组件直接修改子组件的内部状态，保持数据流的单向性。
在 Header 中转发事件
Header 组件需要将 ThemeSettings 的 close 事件转发给 DefaultLayout：
// header.vue
const emit = defineEmits<{
'theme-change': [settings: Settings]
}>()
typescript
<ThemeSettings @close="(s) => emit('theme-change', s)" />
vue
或者使用更简洁的写法，直接在 Header 模板中转发：
<ThemeSettings @close="emit('theme-change', $event)" />
vue
在 DefaultLayout 中处理事件
DefaultLayout 接收 theme-change 事件后，更新本地的 settings 状态：
// default.vue
const localSettings = reactive<Settings>({
theme: '#409EFF',
darkMode: false,
mode: 'sider',
// ...
})
const handleThemeChange = (newSettings: Settings) => {
Object.assign(localSettings, newSettings)
}
typescript
使用 Object.assign 将新设置合并到本地状态中，而不是替换引用，这样所有依赖 localSettings 的 computed 和 watch 都能正确触发更新。
Vue DevTools 调试技巧
在开发过程中，通过 Vue DevTools 可以实时观察组件的 props 和 reactive 数据变化：
- 打开 Chrome DevTools，切换到 Vue 面板
- 在组件树中找到
ThemeSettings组件 - 展开 props 和 reactive 数据
- 修改任何设置项（如暗黑模式开关），观察数据变化
这种调试方式比 console.log 更直观，可以直接看到数据在整个组件树中的流转。
本节小结
- 事件时机：在 Drawer 的
close事件中一次性发出所有设置数据，而不是在每个控件上绑定 change。 - 数据快照：使用
{ ...form }创建新对象，保持数据流的单向性。 - 事件转发：Header 作为中间层，将 ThemeSettings 的 close 事件转发为
theme-change事件。 - 状态合并：DefaultLayout 使用
Object.assign合并新设置到本地 reactive 对象。
↑