Vue 앱 외부에서 Vue 메소드 또는 이벤트에 액세스

나는 꽤 오랫동안 이것을 사용 해왔고 해결책을 찾지 못했습니다. 문제는, Require JS 및 Vue/Vuex로 빌드 된 모듈이 바깥 세상과 통신하기를 바랍니다.Vue 앱 외부에서 Vue 메소드 또는 이벤트에 액세스

내가

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

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

이이 요소

<div id="app"> 

    <customer-select></customer-select> 

</div>

내 main.js. 내 관습이

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

또는 JQuery와를 사용하지 않으

내 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 
      } 

     }); 
    } 

}; 

});

응용 프로그램/구성 요소를 만들 이벤트 또는 참조를 통해 외부 세계와 통신 할 수있는 방법이 있나요를로드 requirejs을 사용하고 그 나는 지나간다?

특히. 나는 나의 뷰 응용 프로그램에 선택하고 그것에게이 처리하기 위해 선택된 데이터를 수신 대해 알고 동일한 페이지에 다른 앱을하게하려는 것이 더

사용

출처

2016-07-05 Lord Habicht

아마도 조금 늦었 겠지만 중재자로 스토리지를 사용하는 것이 어떨까요? sessionStorage 또는 localStorage와 같은 것입니까? 문제는 어떤 데이터가 있는지 localstorage를 계속 확인해야하기 때문에 전역 Window의 함수를 만들어 window.readData 또는 이와 비슷한 함수를 사용하여 구성 요소 내부에서 호출 할 수 있다는 것입니다. –

당신은 전역 변수로 루트 뷰 노드를 저장하는 시도 할 수 있습니다

window.name

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

그런 다음 응용 프로그램의 다른 부분에서 당신은 다른 글로벌 네임 스페이스를 오염하는 것처럼

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

가 난 단지 루트 노드와이 일을 제안 할 수 있습니다.

출처

2016-10-06 16:50:16

Vue 앱 외부에서 Vue 메소드 또는 이벤트에 액세스

답변

관련 문제