Truy cập phương thức Vue hoặc sự kiện từ bên ngoài ứng dụng Vue

Question

Tôi đã bận rộn với điều này trong một thời gian và chưa đưa ra giải pháp. Vấn đề là, tôi muốn mô-đun của mình được xây dựng với Yêu cầu JS và Vue/Vuex để giao tiếp với thế giới bên ngoài.

Tôi không muốn sử dụng

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

hoặc jquery này

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

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

Đây là tùy chỉnh của tôi Yếu tố

<div id="app"> 

    <customer-select></customer-select> 

</div> 

và main.js. của tôi Tôi đang sử dụng requirejs để nạp module AMD tôi

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

app.js tôi

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 
      } 

     }); 
    } 

}; 

}); 

Có cách nào để làm cho ứng dụng/phần giao tiếp với thế giới bên ngoài thông qua một sự kiện hoặc một tài liệu tham khảo mà Tôi đi vào?

Cụ thể. Tôi muốn thực hiện một lựa chọn trong ứng dụng Vue của tôi và có kẻ khác App trên cùng một trang biết về nó một nhận dữ liệu được chọn để xử lý nó hơn nữa

Answer 1

Bạn có thể thử lưu trữ các nút Vue gốc như là một biến toàn cầu sử dụng window.name

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

Sau đó, trong các phần khác của ứng dụng của bạn, bạn có thể có

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

tôi sẽ đề nghị chỉ làm điều này với nút gốc của bạn vì nó sẽ làm ô nhiễm không gian tên toàn cầu của bạn bằng cách khác.