JS、C++与Vue交互通信及数据传递实现
本文详解JS、Vue与C++之间的交互通信机制。涵盖在Vue中暴露方法供JS调用、JS通过webview与C++双向通信传递参数,以及利用localStorage监听实现Vue与JS间的数据同步方案,提供关键代码片段与逻辑说明。
引言
近期开发中遇到一个需求,涉及JavaScript调用Vue组件内的方法、JS与C++代码之间的相互调用以及数据传递等场景。整理此示例旨在为有类似需求的开发者提供参考,内容仅为个人记录,供交流使用。
JS调用Vue中methods内的方法
在Vue组件的mounted生命周期钩子中,将需要被外部调用的方法赋值给全局window对象,从而向JS暴露该接口。
mounted() {
let that = this;
// 将Vue方法传到全局对象window中
window.initDataAction = that.initDataAction
},
methods: {
// 获取数据源
initDataAction(data ) {
console.log(data)
}
}
JS端直接调用已暴露的initDataAction函数,调用时可传入所需的数据参数。
<script type="text/javascript">
let data = []
// 调用获取数据源函数
initDataAction(data)
</script>JS与C++间的通信
JS向C++发起请求,触发C++端执行操作并回调JS中的指定函数,同时传递相关参数。
// 获取文档类型数据源
initDataAction() {
// js 请求 c++
if (window.chrome.webview) {
window.chrome.webview.postMessage(`getEmplates`);
}
}C++端主动触发JS函数,并传递名为res的返回数据参数。
(function(window, document, undefined) {
"use strict";
window.DomUtils = {
// c++ 触发 res为返回数据
getEmplates: function(res) {
// 这里调用js中的函数
}
})(window, document)JS与Vue间数据传输
JS与Vue之间的数据交互可通过两种方式实现:一是利用localStorage.setItem存储数据,但需额外监听setItem事件以获取值的变化,并及时刷新内存或页面数据;二是JS直接调用Vue暴露给window的方法并传递参数,这种方式无需监听数据变化,通过方法调用即可实现新数据的传输。
mounted() {
let that = this;
window.addEventListener("setItemEvent",function(e){
//e.key : 是值发生变化的key
//例如 e.key==="token";
//e.newValue : 是可以对应的新值
if(e.key==="token"){
const templateData = e.newValue
}
})
},以上即为JS、C++与Vue之间方法与数据交互通信的完整示例,更多相关技术资料请关注本站其他文章。
怎么在Vue3项目中集成轻量级JS文本编辑器
2026-11-03 12:21:35
Vue.js官网怎么切换Vue 2与Vue 3版本文档?避免看错版本指南
2026-11-03 08:08:08
ElementUI el-switch 开关组件使用详解与高级应用
2026-10-31 15:21:18
Element UI 表格行按钮点击加载与状态管理实现
2026-10-31 14:12:32
fullCalendar日历插件高级用法与源码修改实战
2026-10-31 10:19:16








