Как я могу обновить данные из внешнего процесса?

Question

У меня есть компонент Vue 2.У него есть атрибут данных, который мне нужно обновить на основе происходящего внешнего события.Я не могу понять, как этого добиться.Я рад рассмотреть события или прямую привязку, наблюдатели, что угодно, я просто совершенно сбит с толку различными примерами в Интернете, которые делают это простым, но ни один из них не работает: (

Я не могупропустить подпорку из экземпляра Vue верхнего уровня, потому что я использую библиотеку, которая поставляет свои собственные компоненты, и они находятся между моим верхним уровнем и моими собственными компонентами ...

Я использую Vue 2.5и мой компонент зарегистрирован с использованием Vue.component() ...

Основной HTML

<div id="app">
    <f7-app :params="f7params">
        <f7-view id="main-view" main>
            <f7-page>
                <f7-navbar>
                    <div class="navbar-inner sliding">
                        <div class="header-logo-container"><img src="img/logo.png" class="logo"></div>
                        <div class="left back-btn"><a href="#" class="link icon-only invisible"><i class="material-icons">chevron_left</i></a></div>
                        <div class="right settings-btn"><a href="#" class="link icon-only"><i class="material-icons">settings</i></a></div>
                    </div>
                </f7-navbar>
                <f7-toolbar>
                    <ym-toolbar></ym-toolbar>
                </f7-toolbar>
                <ym-rootmaps></ym-rootmaps>
            </f7-page>
        </f7-view>
    </f7-app>
</div>

Регистрация компонента Vue

var rootMapsComponent = Vue.component('ym-rootmaps', {
    template: '#rootmaps',
    props: ['menuitem'],
    data: function() {
        return {
            customMenu: window.customMenuJSON,
            rootMaps: window.rootMaps,
            rootAreaImageLocation: rootAreaImageLocation
        };
    },
    created: function () {
        // `this` points to the vm instance
        console.log('Created Root Maps Component');
    }
}); 

// Init App
var vm = new Vue({
el: '#app',
data: function () {
    return {
    // Framework7 parameters here
    f7params: {
        root: '#app', // App root element
        id: 'io.framework7.testapp', // App bundle ID
        name: 'Framework7', // App name
        theme: 'md', // Automatic theme detection
        // App routes
        routes: [],
    },
    rootMaps: {},
    }
},
created: function () {
    // `this` points to the vm instance
    console.log('Created Main App');
    documentReady();
    this.$on('rootmapsUpdated', function(arg) {
        console.log('rootmapsUpdated');
        console.log(this);
        this.rootMaps = window.rootAreas;
    });
}
});

Я хотел бы иметь возможность обновитьrootMaps по требованию от внешнего вызова на эту страницу. Я рад запустить событие, используя vm.$emit, но не знаю, как заставить компонент прослушивать его (мне удалось получить экземпляр приложения верхнего уровня дляприслушайтесь к событию, но ничего дальше)

Есть мысли, намеки, идеи?

Answer 1

Вот пример использования emit в vuejs

в вашем app.js добавлении Vue.prototype.$bus = new Vue();

компонента 1

триггерсобытие, используя:

methods:{
    trigger() {
        this.$bus.$emit('throw-event', sample_data)
    }
}

компонент 2

, вот как вы слушаете:

mounted () {
    this.$bus.$on('throw-event', ($data) => {
       console.log($data) // this will throw the `sample_data` in your emit
    })
}