javascript - Access Vue method or event from outside the Vue app - Stack Overflow

admin管理员组

文章数量:1307909

I've been busy with this for quite some time and haven't e up with a solution. The problem is, I want my module built with Require JS and Vue/Vuex to municate with the outside world.

I don't want to use this

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

or jquery

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

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

This is my custom Element

<div id="app">

    <customer-select></customer-select>

</div>

and my main.js. I'm using requirejs to load my AMD modules

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

my 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,


            ponents : {
                customerSelect : customerSelect
            }

        });
    }

};

});

Is there any way to make the app/ponent municate with the outside world via an event or a reference that I pass in?

Specifically. I want to make a selection in my Vue app and let another App on the same page know about it an receive the selected data to process it further

I've been busy with this for quite some time and haven't e up with a solution. The problem is, I want my module built with Require JS and Vue/Vuex to municate with the outside world.

I don't want to use this

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

or jquery

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

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

This is my custom Element

<div id="app">

    <customer-select></customer-select>

</div>

and my main.js. I'm using requirejs to load my AMD modules

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

my 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,


            ponents : {
                customerSelect : customerSelect
            }

        });
    }

};

});

Is there any way to make the app/ponent municate with the outside world via an event or a reference that I pass in?

Specifically. I want to make a selection in my Vue app and let another App on the same page know about it an receive the selected data to process it further

• javascript
• jquery
• requirejs
• vue.js
• vuex

Share Improve this question Follow edited Jul 5, 2016 at 10:39 Lord Habicht asked Jul 5, 2016 at 9:21 Lord HabichtLord Habicht 18111 silver badge77 bronze badges 1

• Maybe this is a little late, but how about using some storage as mediator? something like sessionStorage or localStorage? the problem is that you'll need to keep checking the localstorage to see if there's any data, so you might create maybe a global Window's function and call it inside your ponent with window.readData or something like that. – Javis Perez Commented Sep 28, 2016 at 2:02

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

You can try storing the root Vue node as a global variable using window.name

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

Then in other parts of your application you can have

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

I would suggest only doing this with your root node as it would pollute your global namespace otherwise.

本文标签： javascriptAccess Vue method or event from outside the Vue appStack Overflow