富媒体工具栏通过 emit 向父组件传递结构化格式指令，如 {type: 'textalign', value: 'center'}；子组件用 defineemits 声明 format-change 事件并触发，父组件监听后调用编辑器 api 应用样式。
富媒体工具栏（比如编辑器顶部的加粗、字号、对齐方式等按钮）通常作为子组件存在，它不直接操作内容，而是把用户选中的格式“告诉”父组件，由父组件决定如何应用。这种场景下，emit 是最自然、最解耦的通信方式。
明确工具栏要传什么格式信息
不是只传一个字符串，而是结构化数据，方便父组件统一处理。常见字段包括：
- type：操作类型，如 'bold'、'fontSize'、'textAlign'、'color'
- value：对应值，如 true / false、'16px'、'center'、'#333'
- range（可选）：光标或选区范围信息，用于精准应用样式
例如点击“居中对齐”，emit 数据可能是：{ type: 'textAlign', value: 'center' }。
子组件：在按钮点击时 emit 格式指令
工具栏组件内部每个按钮绑定 click 事件，触发时调用 emit 并传入格式对象。注意两点：
- 使用
defineEmits显式声明事件名（推荐format-change这类语义化名称） - 避免直接修改父组件状态，只“通知”发生了什么
示例（Vue 3 setup 语法糖）：
<script setup>
const emit = defineEmits(['format-change'])
function handleBold() {
emit('format-change', { type: 'bold', value: !currentBold })
}
function handleFontSize(size) {
emit('format-change', { type: 'fontSize', value: `${size}px` })
}
</script>
父组件：监听并响应格式变更
父组件通过 @format-change 接收数据，并执行实际逻辑，比如：
- 更新编辑器内部格式状态（如用 Quill 或 Tiptap 的 API 应用样式）
- 同步到绑定的 v-model 值（若支持富文本序列化）
- 触发后续动作，如保存草稿、高亮当前格式按钮
关键点是：父组件拥有数据和执行权，工具栏只负责“发声”。
示例：
<richtoolbar></richtoolbar>
// 父组件方法
function onFormatChange({ type, value }) {
if (type === 'bold') {
editor.format('bold', value)
} else if (type === 'fontSize') {
editor.format('size', value)
}
}
进阶建议：统一格式协议 + 类型约束
为避免格式字段随意拼写，可定义 TypeScript 接口或常量对象：
// formats.ts
export const FORMAT_TYPES = {
BOLD: 'bold',
ITALIC: 'italic',
FONT_SIZE: 'fontSize',
TEXT_ALIGN: 'textAlign',
} as const
export type FormatType = typeof FORMAT_TYPES[keyof typeof FORMAT_TYPES]
export interface FormatPayload {
type: FormatType
value: string | boolean | number
range?: { index: number; length: number }
}
然后在子组件 emit 前做校验，在父组件处理时用类型守卫，提升可维护性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
