vue：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
          }
        })
 },