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方法数据交互的资料请关注脚本之家其它相关文章!

相关文章

  • 为输入框加入数字js校验代码分享

    为输入框加入数字js校验代码分享

    这篇文章主要介绍了为输入框加入数字js校验代码分享,还是比较不错的,这里分享给大家,供需要的朋友参考。
    2017-11-11
  • JS 基本概念详细介绍

    JS 基本概念详细介绍

    这篇文章主要介绍JS 基本概念,对于初学者来说,Javascript 乍一看似乎很容易,因为它的类似于 C 的语法,但不管它的运行方式如何,对语言 (ESNext) 及其框架所做的不断变化可能会让初学者不知所措。下面我们就来看JS 初学者怎么入门吧
    2021-10-10
  • 详解Three.js 场景中如何彻底删除模型和性能优化

    详解Three.js 场景中如何彻底删除模型和性能优化

    这篇文章主要为大家介绍了详解Three.js 场景中如何彻底删除模型和性能优化,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • VBScript版代码高亮

    VBScript版代码高亮

    VBScript版代码高亮...
    2006-06-06
  • threejs中使用drawbufferss示例详解

    threejs中使用drawbufferss示例详解

    这篇文章主要为大家介绍了threejs中使用drawbufferss示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • Canvas如何判断点在形状内及内置API性能详解

    Canvas如何判断点在形状内及内置API性能详解

    这篇文章主要为大家介绍了Canvas如何判断点在形状内及内置API性能详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 使用PreloadJS加载图片资源的基础方法详解

    使用PreloadJS加载图片资源的基础方法详解

    PreloadJS是一个用来管理和协调相关资源加载的类库,它可以方便的帮助你预先加载相关资源简单点儿说就是一个加载插件,它可以做成页面异步加载且顶部会有进度条动画
    2020-02-02
  • 微信小程序 for 循环详解

    微信小程序 for 循环详解

    这篇文章主要介绍了微信小程序 for 循环详解的相关资料,需要的朋友可以参考下
    2016-10-10
  • 详解如何让页面与 iframe 进行通信

    详解如何让页面与 iframe 进行通信

    这篇文章主要为大家介绍了详解如何让页面与 iframe 进行通信实现实例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • JavaScript中fetch方法的使用示例全面详解

    JavaScript中fetch方法的使用示例全面详解

    这篇文章主要为大家介绍了JavaScript中fetch方法的使用示例全面详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06

最新评论