vue3与cef3交互

不甘平凡的小鸟2026-01-31 8:57

cef版本：92.0.27+g274abcf+chromium-92.0.4515.159_windows64

node：v22.22.0

vue: "^3.5.26"

1、vue3组件调用C++方法：

C++中：

cpp 复制代码

RenderDelegate::OnWebKitInitialized()
{
	  CefRefPtr<CefV8Handler> handler = m_v8handler;
	  std::string app_code =
		  "var APP;"
		  "if (!APP)"
		  "    APP= {};"
		  "(function() {"

		  "    APP.call_c_p_p= function(param,callback) {"
		  "        native function call_c_p_p();"
		  "        return call_c_p_p(param,callback);"
		  "     };"

		  "})();";

	  CefRegisterExtension("v8/APP", app_code, handler);
}

Vue3组件中：

javascript 复制代码

const handleFunc = async () => {
        if (typeof (window.APP) == "undefined") {
    }
    else {
        var ret = window.APP.call_c_p_p("msg param", (result) => {
            alert("result:" + result);
        });
    }
    return
}

2、C++调用vue3：

C++代码：

cpp 复制代码

CefRefPtr<CefBrowser> browser = context->GetRootWindowManager()->GetActiveBrowser();
CString callparam;

callparam.Format(_T("call_vue('%s');"), _T("来自CEF3的调用"));

browser->GetMainFrame()->ExecuteJavaScript(callparam.GetBuffer(), browser->GetMainFrame()->GetURL(), 0);

Vue组件：

javascript 复制代码

onMounted(() => {
window.call_vue = (param) =>
{
	alert("receive msg from CEF3: " + param);
}
})

不管是vue调C++还是C++调vue，vue中都要通过window对象来访问。