js c++ vue方法与数据交互通信示例
更新时间：2023年08月21日 11:27:11 作者：黑萝卜不黑
这篇文章主要为大家介绍了js c++ vue方法与数据交互通信示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
引言
最近写了一个小需求，其中涉及到js调用vue中函数、js与c++相互调用、数据传输等问题，希望这里可以帮助到有需要的小伙伴儿，个人记录，仅供参考。
js调用vue中methods内的方法
在vue的钩子函数mounted中将需要在js中调用的函数赋值给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方法与数据交互通信示例的详细内容，更多关于js c++ vue方法数据交互的资料请关注脚本之家其它相关文章！
相关文章
实现微信小程序的wxml文件和wxss文件在webstrom的支持
这篇文章主要介绍了实现微信小程序的wxml文件和wxss文件在webstrom的支持的相关资料,需要的朋友可以参考下2017-06-06
这篇文章主要为大家介绍了自定义range sliders滑块实现元素拖动方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要为大家介绍了详解如何让页面与 iframe 进行通信实现实例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要为大家介绍了JavaScript原型链中函数和对象的理解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
这篇文章主要介绍了JavaScript的提携小技巧，如：过滤唯一值、短路求值、转换Boolean型等等，想详情了解的小伙伴请参考下面文章的具体内容2021-09-09
基于JavaScript ES新特性let与const关键字
这篇文章主要介绍了基于JavaScript ES新特性let与const关键字，let是ECMAScript 2015新增的一个关键字，用于声明变量，const关键字用于声明一个常量，更多详细内容，请需要的小伙伴参考下面文章的介绍，希望对你有所帮助2021-12-12
这篇文章主要为大家介绍了JavaScript设计模式之命令模式和状态模式详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要为大家介绍了2023年了该了解下WebComponent使用教程，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
lodash内部方法getFuncName及setToString剖析详解
本篇章我们主要是通过了解lodash里的两个内部方法getFuncName方法和setToString方法，在实际开发中我们也可以借鉴方法的实现思路，在需要的时候简单封装一下，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要为以JavaScript 执行上下文的视角为大家讲清楚 this使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
最新评论