python EEL + vue3.js 简单示例

把index.html 中引入eel.js 后，eel这个对象就是全局对象了，无论在index.htm中还是组件中，都能使用这个全局对象。

我们组件HelloWorld.vue挂载到组件App.vue上,然后把App.vue挂载到index.html 这样最常见的结构为例：

HelloWorld.vue

//HelloWorld.vue


<script setup>
import { ref } from 'vue'

const count = ref(0)
const message = ref("Hello World!")
 
const sayHelloByEEL = (x) => {
  eel.say_hello_py(x + Math.floor(Math.random() * 101).toString() + 'ee')
}

const sayHelloJS = (x) => {
    message.value = 'Say Hello From ' + Math.floor(Math.random() * 101).toString() +x;
}

//暴露sayHelloJS给Python （以say_hello_js为别名）
eel.expose(sayHelloJS, 'say_hello_js')


</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>

App.vue

//App.vue

<template>
  <img alt="Vue logo" src="./assets/vue.svg"> python eel + Vue3
  <HelloWorld />
</template>

<script setup>

import H