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

Question

我已经忙了很长时间了,并没有提出解决方案.问题是,我希望我的模块使用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应用程序中进行选择,并让同一页面上的另一个应用程序了解它并接收所选数据以进一步处理它

Answer 1

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

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

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

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

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