JS、C++与Vue交互通信及数据传递实现

作者:青团子时间:2026-10-30 23:10:47浏览:412

本文详解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之间方法与数据交互通信的完整示例,更多相关技术资料请关注本站其他文章。

作者最新文章
相关文章
更多