vue中实现打印预览的全局事件触发需用mitt等事件总线库替代已移除的$bus，通过emit发布、on监听事件传递打印数据，并配合v-if控制组件挂载与afterprint自动关闭，确保松耦合、可清理、支持传参。
Vue 中实现打印预览的全局事件触发，核心是让任意组件都能“发布”打印请求，而负责打印逻辑的组件（比如一个 PrintPreview.vue）能“订阅”并响应。这不是靠 Vue 原生的 $emit（它只在父子间有效），而是需要跨组件通信机制。
用 mitt 或 tiny-emitter 实现轻量级全局事件总线
Vue 3 已移除内置的 Vue.prototype.$bus，推荐使用外部事件总线库，如 mitt（最常用、无依赖、仅 200B）。
- 安装：
npm install mitt - 创建总线实例（例如
src/utils/eventBus.js）：
import mitt from 'mitt'<br>export const eventBus = mitt()
在触发打印的组件中（如按钮页）：
import { eventBus } from '@/utils/eventBus'<br><br>// 点击时发出打印指令，可携带数据<br>handlePrint() {<br> eventBus.emit('print-preview', {<br> title: '订单详情',<br> content: this.printData,<br> styles: '@media print { body { font-size: 12pt; } }'<br> })<br>}在打印预览组件中监听并处理事件
在 PrintPreview.vue 的 setup 或 mounted 中订阅事件，收到后渲染内容并调用 window.print()：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
import { onMounted, onUnmounted } from 'vue'<br>import { eventBus } from '@/utils/eventBus'<br><br>export default {<br> setup() {<br> const handlePrintPreview = (payload) => {<br> // 更新本地打印数据（触发视图更新）<br> printContent.value = payload.content<br> printTitle.value = payload.title<br> printStyles.value = payload.styles<br> // 强制重排，确保 DOM 渲染完成后再打印<br> nextTick(() => {<br> window.print()<br> })<br> }<br><br> onMounted(() => {<br> eventBus.on('print-preview', handlePrintPreview)<br> })<br><br> onUnmounted(() => {<br> eventBus.off('print-preview', handlePrintPreview)<br> })<br><br> return { /* ... */ }<br> }<br>}配合 v-if 控制预览组件的显示时机（可选但推荐）
避免预览组件常驻 DOM 影响性能，可用一个响应式开关控制其挂载：
- 在总线事件回调中设置
showPreview = true - 模板中写：
<printpreview v-if="showPreview"></printpreview> - 在预览组件内部，
window.print()后可自动关闭（监听afterprint事件）：
const closeAfterPrint = () => {<br> showPreview.value = false<br>}<br>window.addEventListener('afterprint', closeAfterPrint)<br>onUnmounted(() => {<br> window.removeEventListener('afterprint', closeAfterPrint)<br>})替代方案：Pinia + Actions 封装（适合大型项目）
如果已用 Pinia 管理状态，也可将打印逻辑封装为 store action：
- 定义
usePrintStore()，含triggerPreview(payload)action - action 内部直接调用打印逻辑，或通过
defineStore的subscribe通知组件 - 优势：类型安全、可调试、与状态流统一；劣势：略重，小项目不必要
本质上，全局打印预览的关键不是“自定义事件”的语法，而是建立一套松耦合、可清理、支持传参的通信契约。mitt 是最直接、零配置的选择，几行代码就能让任意组件一键唤起预览。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
