Tauri跨Vue组件全局事件监听失败问题及最佳实践咨询

算力阿峰

2026-7-14

问题：Tauri跨窗口事件传递失败，参数无法从Start.vue传递到Playboard.vue

我要实现一个Tauri+Vue的小程序，需求如下：

点击Start.vue组件的按钮弹出新窗口
新窗口由Playboard.vue组件构成
Start.vue需将用户填写的初始化参数传递给Playboard.vue

我用Tauri的emit/listen API实现，但日志显示Start.vue已经发出"parameter-init"事件，Playboard.vue却捕获不到，导致加载停滞。

相关代码

Start.vue

<script setup lang="ts">
import { ref } from "vue";
import { winConfig, Windows } from "./Window";
import { emit, listen } from "@tauri-apps/api/event";
import { parameterConfig } from "./Parameters"

const displayWindow: winConfig = {
    label: 'playBoard',
    others: {
      // 窗口配置参数
    }
}

const w = ref("");
const h = ref("");
const m = ref("");

var windows: Windows = new Windows();
windows.listen();

async function start() {
  const params: parameterConfig = {
    width: w.value,
    height: h.value,
  }
  await emit("tauri-win-create", displayWindow)
  await emit("parameter-init", params)
}
</script>

<template>
  <div class = "container" id="startarea">
    <div class = "container" id="inputarea">
      <p><input id="greet-input" v-model="w" placeholder="Width" /></p>
      <p><input id="greet-input" v-model="h" placeholder="height" /></p>
      <p><input id="greet-input" v-model="m" placeholder="number of mines" /></p>
    </div>
    <div id="clickarea">
      <button type="button" @click="start" >Start</button>
    </div>
  </div>
</template>

Playboard.vue

<script setup lang="ts">
import Display from "./components/Display.vue";
import { listen, emit } from "@tauri-apps/api/event";
import { Parameter } from "./components/Parameters"

var params: Parameter = new Parameter();
params.listen();
</script>

<template>
  <div class="container">
    <div>
      <Display :width="params.width" :height="params.height"/>
    </div>
  </div>
</template>

Window.ts

import { WebviewWindow, appWindow, getAll, WindowOptions } from '@tauri-apps/api/window'
import { emit, listen } from '@tauri-apps/api/event'

export type winConfig = {
    label: string,
    others: WindowOptions
}

export class Windows {
    mainWin!: WebviewWindow;

    getWin(label: string) {
        return WebviewWindow.getByLabel(label)
    }

    getAllWin() {
        return getAll()
    }

    async createWin(options: winConfig) {
        let label = options.label
        let args: WindowOptions = options.others
        console.log(args)

        const existWin = getAll().find(w => w.label == label)
        if(existWin) {
            if(existWin.label.indexOf('main') == -1) {
                await existWin?.unminimize()
                await existWin?.setFocus()
                return
            }
            await existWin?.close()
        }

        let win = new WebviewWindow(label, args)
        
        win.once('tauri://created', async() => {
            console.log('window create success!')
        })
        win.once('tauri://error', async() => {
            console.log('window create error!')
        })
    }

    async listen() {
        await listen<winConfig>('tauri-win-create', (event) => {
            console.log(event)
            this.createWin(event.payload)
        })
    }
}

Parameters.ts

import { listen } from '@tauri-apps/api/event'
import { event } from '@tauri-apps/api'

export type parameterConfig = {
    width: string,
    height: string
} 

export class Parameter {
    width: number = 0
    height: number = 0

    init(p: parameterConfig) {
        this.width = Number(p.width)
        this.height = Number(p.height)
    }

    async listen() {
        await listen<parameterConfig>('parameter-init', (event) => {
            console.log(event.payload)
            this.init(event.payload)
        })
    }
}

尝试过的方案

尝试握手机制：让Parameters.ts先emit信号，等Start.vue收到后再发送参数，但对async/await的使用逻辑不清晰，没成功
移除Playboard.vue的监听逻辑，改用静态绑定props能正常运行，推测问题出在async/await和emit/listen的使用时机或作用域上

咨询问题

请问这个问题的根源是什么？实现该功能的最佳实践方案是什么？

问题根源

事件发送时机过早：你在start函数中先触发窗口创建事件，紧接着就发送参数事件，但新窗口的Playboard.vue还未完成初始化、未注册事件监听，此时发送的事件会直接丢失。
跨窗口事件作用域问题：Tauri默认的emit是向当前窗口的事件总线发送，新窗口是独立的Webview实例，默认无法接收其他窗口的事件，需要明确指定接收窗口或启用全局事件总线。

最佳实践方案

方案一：窗口就绪后再发送参数（事件方式）

修改Start.vue的start函数，等待新窗口发送就绪信号后再传递参数：

<script setup lang="ts">
// ... 原有代码
async function start() {
  const params: parameterConfig = {
    width: w.value,
    height: h.value,
  }
  // 监听新窗口就绪信号
  const unlisten = await listen('playboard-ready', () => {
    emit("parameter-init", params)
    unlisten() // 取消监听，避免重复触发
  })
  // 触发窗口创建
  await emit("tauri-win-create", displayWindow)
}
</script>

修改Parameters.ts，初始化完成后先发送就绪信号：

// Parameters.ts
import { listen, emit } from '@tauri-apps/api/event'

export class Parameter {
    // ... 原有属性
    async listen() {
        // 先通知主窗口：新窗口已就绪
        await emit('playboard-ready')
        // 再监听参数事件
        await listen<parameterConfig>('parameter-init', (event) => {
            console.log(event.payload)
            this.init(event.payload)
        })
    }
}

同时在tauri.conf.json中启用全局事件权限：

{
  "tauri": {
    "allowlist": {
      "event": {
        "all": true,
        "emit": true,
        "listen": true
      }
    }
  }
}

方案二：创建窗口时直接传递参数（更简洁）

利用Tauri创建窗口时的data选项，直接将参数嵌入窗口配置，不需要事件传递：

修改Window.ts的createWin方法：

// Window.ts
async createWin(options: winConfig, initParams?: parameterConfig) {
    let label = options.label
    let args: WindowOptions = {
        ...options.others,
        // 将参数存入窗口data
        data: initParams ? { params: initParams } : {}
    }
    // ... 原有窗口创建逻辑
}

修改Start.vue的start函数，直接传递参数：

<script setup lang="ts">
// ... 原有代码
async function start() {
  const params: parameterConfig = {
    width: w.value,
    height: h.value,
  }
  // 直接把参数传给窗口创建方法
  await windows.createWin(displayWindow, params)
}
</script>

修改Playboard.vue，从窗口data中读取参数：

<script setup lang="ts">
import Display from "./components/Display.vue";
import { appWindow } from '@tauri-apps/api/window';
import { Parameter } from "./components/Parameters";

const params = new Parameter();

async function initParams() {
  const winData = await appWindow.data()
  if(winData.params) {
    params.init(winData.params)
  }
}

initParams()
</script>

方案三：全局状态管理（复杂场景）

如果是多窗口复杂应用，可使用Tauri的@tauri-apps/api/store做全局存储，或配合Vue的Pinia（需配置窗口shared: true实现状态共享），Start.vue更新全局状态，Playboard.vue直接读取状态。

内容的提问来源于stack exchange，提问作者MezoBlast