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++，觸發(fā)c++吊起js中的函數并傳遞參數

   // 獲取文檔類型數據源
  initDataAction() {
        // js 請求 c++
      if (window.chrome.webview) {
          window.chrome.webview.postMessage(`getEmplates`);
      }  
}

c++ 觸發(fā)js函數，并傳遞res參數

(function(window, document, undefined) {
  "use strict";
  window.DomUtils = {
    // c++ 觸發(fā) res為返回數據
    getEmplates: function(res) {
      // 這里調用js中的函數
    }
})(window, document)

js與vue間數據傳輸

js與vue間數據傳輸可以使用本地存儲localStorage.setItem，不過這里要注意監(jiān)聽setItem值的變化及時刷新內存或是頁面數據。另一種是js中調用vue暴露給window的函數傳參，這種傳參不需要特別監(jiān)聽數據變化，只要調用方法就可以實現新數據的傳輸。

mounted() {
        let that = this;
        window.addEventListener("setItemEvent",function(e){
          //e.key : 是值發(fā)生變化的key
          //例如 e.key==="token";
          //e.newValue : 是可以對應的新值
          if(e.key==="token"){
            const templateData = e.newValue
          }
        })
 },

以上就是js c++ vue方法與數據交互通信示例的詳細內容，更多關于js c++ vue方法數據交互的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: