10

私はかなり長い間これで忙しく、解決策を思いつきませんでした。問題は、モジュールを 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。AMDモジュールをロードするためにrequirejsを使用しています

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 アプリで選択を行い、同じページの別のアプリにそれを知らせ、選択したデータを受け取ってさらに処理したい

4

1 に答える 1

6

を使用して、ルート Vue ノードをグローバル変数として保存してみることができます。window.name

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

次に、アプリケーションの他の部分で次のことができます

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

そうしないとグローバル名前空間が汚染されるため、ルートノードでのみこれを行うことをお勧めします。

于 2016-10-06T16:50:16.937 に答える