js c++ vue方法與數(shù)據(jù)交互通信示例
引言
最近寫(xiě)了一個(gè)小需求,其中涉及到j(luò)s調(diào)用vue中函數(shù)、js與c++相互調(diào)用、數(shù)據(jù)傳輸?shù)葐?wèn)題,希望這里可以幫助到有需要的小伙伴兒,個(gè)人記錄,僅供參考。
js調(diào)用vue中methods內(nèi)的方法
在vue的鉤子函數(shù)mounted中將需要在js中調(diào)用的函數(shù)賦值給window,暴露給js
mounted() {
let that = this;
// 將Vue方法傳到全局對(duì)象window中
window.initDataAction = that.initDataAction
},
methods: {
// 獲取數(shù)據(jù)源
initDataAction(data ) {
console.log(data)
}
}
在js中直接調(diào)用initDataAction函數(shù),這里的函數(shù)中也可以傳遞對(duì)應(yīng)數(shù)據(jù)。
<script type="text/javascript"> let data = [] // 調(diào)用獲取數(shù)據(jù)源函數(shù) initDataAction(data) </script>
js與c++間的通信
js 請(qǐng)求 c++,觸發(fā)c++吊起js中的函數(shù)并傳遞參數(shù)
// 獲取文檔類型數(shù)據(jù)源
initDataAction() {
// js 請(qǐng)求 c++
if (window.chrome.webview) {
window.chrome.webview.postMessage(`getEmplates`);
}
}c++ 觸發(fā)js函數(shù),并傳遞res參數(shù)
(function(window, document, undefined) {
"use strict";
window.DomUtils = {
// c++ 觸發(fā) res為返回?cái)?shù)據(jù)
getEmplates: function(res) {
// 這里調(diào)用js中的函數(shù)
}
})(window, document)js與vue間數(shù)據(jù)傳輸
js與vue間數(shù)據(jù)傳輸可以使用本地存儲(chǔ)localStorage.setItem,不過(guò)這里要注意監(jiān)聽(tīng)setItem值的變化及時(shí)刷新內(nèi)存或是頁(yè)面數(shù)據(jù)。另一種是js中調(diào)用vue暴露給window的函數(shù)傳參,這種傳參不需要特別監(jiān)聽(tīng)數(shù)據(jù)變化,只要調(diào)用方法就可以實(shí)現(xiàn)新數(shù)據(jù)的傳輸。
mounted() {
let that = this;
window.addEventListener("setItemEvent",function(e){
//e.key : 是值發(fā)生變化的key
//例如 e.key==="token";
//e.newValue : 是可以對(duì)應(yīng)的新值
if(e.key==="token"){
const templateData = e.newValue
}
})
},以上就是js c++ vue方法與數(shù)據(jù)交互通信示例的詳細(xì)內(nèi)容,更多關(guān)于js c++ vue方法數(shù)據(jù)交互的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Fabric.js?監(jiān)聽(tīng)元素是否相交重疊
這篇文章主要為大家介紹了Fabric.js?監(jiān)聽(tīng)元素是否相交重疊的方案示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02
微信小程序promsie.all和promise順序執(zhí)行
這篇文章主要介紹了微信小程序promsie.all和promise順序執(zhí)行的相關(guān)資料,希望通過(guò)本文能幫助到大家,需要的朋友可以參考下2017-10-10
微信小程序 wx.uploadFile在安卓手機(jī)上面the same task is working問(wèn)題解決
這篇文章主要介紹了微信小程序 wx.uploadFile在安卓手機(jī)上面the same task is working問(wèn)題解決的相關(guān)資料,需要的朋友可以參考下2016-12-12
詳解無(wú)界微前端是如何渲染子應(yīng)用的demo解析
這篇文章主要為大家介紹了詳解無(wú)界微前端是如何渲染子應(yīng)用demo解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04

