从 Vue 应用程序外部访问 Vue 方法或事件

Posted 2023-02-22

【中文标题】从 Vue 应用程序外部访问 Vue 方法或事件

【英文标题】：Access Vue method or event from outside the Vue app

【发布时间】：2016-11-07 01:38:19

【问题描述】：

我已经忙了很长时间了，还没有想出解决方案。问题是，我希望我的模块使用 Require JS 和 Vue/Vuex 构建来与外界通信。

我不想用这个

require(["myModule"],function(vm)
vm.$children[0].myMethod()
);

或者jquery

// inside app
$(document).trigger("myEvent",payload);

// outside app
$(document).on("myEvent",myHandler);

这是我的自定义元素

<div id="app">

    <customer-select></customer-select>

</div>

还有我的 main.js。我正在使用 requirejs 加载我的 AMD 模块

define(["./app2/app"], function (CustomerSelectApp) 
    CustomerSelectApp.init("#app");
);

我的 app.js

define([ "vue", "jquery", "webjars/nm-customer-select/nm-customer-select",
    "css!bootstrap-css" ],

function(Vue, $, customerSelect) 

return 
    init : function(targetElement) 
        return new Vue(
            el : targetElement,


            components : 
                customerSelect : customerSelect
            

        );
    

;

);

有什么方法可以让应用/组件通过我传入的事件或引用与外界通信？

具体来说。我想在我的 Vue 应用程序中进行选择，并让同一页面上的另一个应用程序知道它并接收所选数据以进一步处理它

【问题讨论】：

也许这有点晚了，但是使用一些存储作为中介怎么样？ sessionStorage 或 localStorage 之类的东西？问题是您需要继续检查本地存储以查看是否有任何数据，因此您可能会创建一个全局 Window 的函数并使用 window.readData 或类似的东西在您的组件中调用它。

【参考方案1】：

您可以尝试使用 window.name 将根 Vue 节点存储为全局变量

define(["./app2/app"], function (CustomerSelectApp) 
    window.VueRoot = CustomerSelectApp.init("#app");
);

然后在你的应用程序的其他部分你可以拥有

VueRoot.method();
VueRoot.data = value;
VueRoot.$emit('event', data);

我建议只对您的根节点执行此操作，否则会污染您的全局命名空间。