宁波住房和城乡建设网站制作网页链接
eel官方示例中暴露的js函数是全局函数，vue中的自定义函数作用域通常都是组件范围内。要让eel.js调用，需要将其升为全局可用。
一般方法有 app.config.globalProperties 或 mixin等。
main.js
//main.jsimport { createApp } from 'vue'
import App from './App.vue'const app = createApp(App);// 在 Vue 3 中添加全局属性（例如 `$eel`）
app.config.globalProperties.$eel = window.eel;app.mount('#app');
App.vue
<template><img alt="Vue logo" src="./assets/vue.svg"> python eel + Vue3<HelloWorld />
</template><script>import HelloWorld from './components/HelloWorld.vue';export default {name: 'App',components: {HelloWorld}
}</script><style>
#app {text-align: center;margin-top: 60px;
}
</style>
HelloWorld.vue
// HelloWorld.vue<script setup>//定义getCurrentInstance().appContext.config.globalProperties
import { ref, onMounted,getCurrentInstance } from 'vue'
const instance = getCurrentInstance();
const globalProperties = instance.appContext.config.globalProperties;// create a reactive count using ref
const count = ref(0)
const message = ref("Hello World!")const sayHelloByEEL = (x) => {globalProperties.$eel.say_hello_py(x + Math.floor(Math.random() * 101).toString())
}const sayHelloJS = (x) => {message.value = 'Say Hello From ' + Math.floor(Math.random() * 101).toString() +x;
}//使用 globalProperties 暴露sayHelloJS给Python （以say_hello_js为别名）
globalProperties.$eel.expose(sayHelloJS, 'say_hello_js')onMounted(() => {console.log(globalProperties)
})</script><template><p><button type="button" @click="count++">count is: {{ count }}</button></p><p><button @click="sayHelloByEEL('Javascript Button! ')">调用Python函数</button></p><p>{{ message }}</p><p><button @click="sayHelloJS(' JS Button!')">调用JS函数</button></p></template><style scoped></style>