python EEL + vue3.js 项目中如何把组件中的函数提升为全局函数

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>