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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/838370.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java中Set不同实现类的对比

Java中Set不同实现类的对比 在Java的集合框架中&#xff0c;Set接口表示一个不包含重复元素的集合。与List接口不同&#xff0c;Set不保证元素的顺序&#xff08;除非使用它的某个特定实现&#xff0c;如LinkedHashSet&#xff09;&#xff0c;且不支持索引访问。Java提供了几…

Java中的数组、Set、List、Map类型的互相转换总结

序言 数组、Set、List、Map是Java语言非常常用的几种数据类型&#xff0c;他们之间存在着千丝万缕的联系。关于底层的数据结构我这里就不再多说啦&#xff0c;直接从应用出发&#xff0c;总结他们之间的转换方法&#xff0c;并给出推荐方法。 大家可以点赞收藏等到需要的时候…

【JAVA】嵌入式软件工程师-2025校招必备-详细整理

一、Java 基础 1.JDK 和 JRE 有什么区别&#xff1f; jdk&#xff1a;java development kit jre&#xff1a;java runtime Environment jdk是面向开发人员的&#xff0c;是开发工具包&#xff0c;包括开发人员需要用到的一些类。 jre是java运行时环境&#xff0c;包括java虚拟机…

SVDD(Singing Voice Deepfake Detection,歌声深度伪造检测)挑战2024

随着AI生成的歌声快速进步&#xff0c;现在能够逼真地模仿自然人类的歌声并与乐谱无缝对接&#xff0c;这引起了艺术家和音乐产业的高度关注。歌声与说话声不同&#xff0c;由于其音乐性质和强烈的背景音乐存在&#xff0c;检测伪造的歌声成为了一个特殊的领域。 SVDD挑战是首个…

惠州在线教育系统公司,K12数学受资本关注?麦斯数学获数千万人民币Pre-A轮融资

K12赛道一直是很火热的&#xff0c;大家也非常关注细分领域中的数学。近日麦斯数学宣布完成数千万人民币Pre-A轮融资&#xff0c;投资方为联想之星。 麦斯数学由51Talk联合创始人舒婷创立&#xff0c;目标定位于9-15岁的青少儿群体。据了解&#xff0c;麦斯数学以在线12-16人小…

电脑常用的PDF阅读器-嗨动PDF编辑器!带你详细了解它

电脑常用的PDF阅读器-嗨动PDF编辑器&#xff01;在数字化信息爆炸的时代&#xff0c;PDF格式的文件因其易于打印和保留原始格式等优点&#xff0c;成为了人们日常工作和学习的常用格式。而对于PDF文件的处理&#xff0c;一款功能强大、操作简便的PDF阅读器是必不可少的。今天&a…

小白学dubbo傻冒连问-长连接篇

dubbo长连接有多长&#xff1f; dubbo的长连接并没有一个固定的时间长度&#xff0c;因为它是相对于通常的短连接而言的&#xff0c;主要特点是长时间保持客户端与服务端的连接状态。 在dubbo中&#xff0c;缺省协议采用单一长连接和NIO异步通讯&#xff0c;适合于小数据量大并…

SprintBoot案例-增删改查

黑马程序员JavaWeb开发教程 文章目录 一、准备工作1. 准备数据库表1.1 新建数据库mytlias1.2 新建部门表dept1.3 新建员工表emp 2. 准备一个Springboot工程2.1 新建一个项目 3. 配置文件application.properties中引入mybatis的配置信息&#xff0c;准备对应的实体类3.1 引入myb…

FastAdmin菜单规则树形结构分类显示

控制器controller文件Classification.php <?phpnamespace app\admin\controller\classification;use app\common\controller\Backend; use fast\Tree; use think\Db; use app\admin\model\AuthRule; use think\Cache;/*** 模块分类管理** icon fa fa-circle-o*/ class Cla…

Linux/Debian/Ubuntu系统中apt/apt-get的20个常见命令

apt的20个常见命令 以下是apt的20个常见命令&#xff1a; apt install <package>&#xff1a;安装软件包。apt remove <package>&#xff1a;移除软件包。apt purge <package>&#xff1a;移除软件包及其配置文件。apt update&#xff1a;更新可用软件包列…

学习前端第三十七天(静态属性静态方法、类检查、错误处理)

一、静态属性和静态方法 1、静态属性静态方法 在属性和方法前加上static&#xff0c;创建属于类自己的属性和方法 class Person {// 加static&#xff0c;属于类自己的static name "xc"; // 类的name属性static height 183; // 类的height属性static age 20;…

设计模式14- Chain of Responsibility Method 责任链设计模式

设计模式14- Chain of Responsibility Method 责任链设计模式 1.定义 责任链模式&#xff08;Chain of Responsibility Pattern&#xff09;是一种行为型设计模式。它通过把请求从一个对象传到链条中的下一个对象的方式&#xff0c;直到请求被处理完毕&#xff0c;以实现解耦…

weblogic 任意文件上传 CVE-2018-2894

一、漏洞简介 在 Weblogic Web Service Test Page 中存在一处任意文件上传漏洞&#xff0c; Web Service Test Page 在"生产模式"下默认不开启&#xff0c;所以该漏洞有一定限制。利用该 漏洞&#xff0c;可以上传任意 jsp 文件&#xff0c;进而获取服务器权限。 二…

[链表专题]力扣141, 142

1. 力扣141 : 环形链表 题 : 给你一个链表的头节点 head &#xff0c;判断链表中是否有环。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&#xff0c;评测系统内部使用整数 pos 来表示链表尾…

数据结构------二叉树经典习题1

博主主页: 码农派大星. 关注博主带你了解更多数据结构知识 1判断相同的树 OJ链接 这道题相对简单,运用我们常规的递归写法就能轻松写出 所以我们解题思路应该这样想: 1.如果p为空&#xff0c;q为空&#xff0c;那么就是两颗空树肯定相等 2.如果一个树为空另一棵树不为空那么…

2024年,诺基亚手机发售仅一天就售罄

在智能手机越来越同质化的今天&#xff0c;各家都只卷性能和相机&#xff0c;大火的 AI 对于咱来说好像实用性又不太大&#xff0c;机圈属实整的有点儿无聊。 不过在阿红这两天上网冲浪的时候&#xff0c;一个陌生又熟悉的名字闯入了我的视线&#xff0c;——诺基亚&#xff08…

维护表空间中的数据文件

目录 向表空间中添加数据文件 从表空间中删除数据文件 删除users表空间中的users02.dbf数据文件 对数据文件的自动扩展设置 Oracle从入门到总裁:​​​​​​https://blog.csdn.net/weixin_67859959/article/details/135209645 维护表空间中的数据文件主要包括向表空间中添…

深度学习中常见的九种交叉验证方法汇总

目录 1. K折交叉验证&#xff08;K-fold cross-validation&#xff09; 2. 分层K折交叉验证&#xff08;Stratified K-fold cross-validation&#xff09; 3. 时间序列交叉验证&#xff08;Time Series Split&#xff09; 4. 留一交叉验证&#xff08;Leave-One-Out Cross-…

8个迹象表明你需要一台新笔记本电脑,看一下你的笔记本是否有其中一个

序言 当你第一次打开你的笔记本电脑的盒子时,它会以最高性能运行,电池寿命更长,过热最小,资源使用效率高。然而,随着笔记本电脑的老化,它将不能满足预期用途。以下几个迹象表明,可能是时候寻找并投资一款新设备了。 你的设备不再具有预期用途 如果你的笔记本电脑不再…

Java内存模式以及volatile关键字的使用

1.Java内存模型 &#xff08;1&#xff09;Java 内存模型&#xff08;Java Memory Model&#xff0c;简称 JMM&#xff09;&#xff0c;它是一个抽象的概念&#xff0c;JMM是和多线程相关的&#xff0c;它是一组规范&#xff0c;描述了一组规则&#xff0c;定义了多线程对共享…