Access a Vue Method or Event Outside of a Vue Application

Question

I have been doing this for quite some time and have not come up with a solution. The problem is that I want my module to be built with the requirement of JS and Vue / Vuex to communicate with the outside world.

I do not 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 item.

 <div id="app"> <customer-select></customer-select> </div> 

and my main.js. I use 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, components : { customerSelect : customerSelect } }); } }; }); 

Is there a way to get the application / component to interact with the outside world through an event or link that I pass?

In particular. I want to make a choice in my Vue application and let another application on the same page know about it in order to get the selected data for further processing.

Answer 1

You can try to save 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 may have

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

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