代码之家 › 专栏 › 技术社区 › Matt Fellows

如何从外部流程更新数据?

vuejs2 javascript

Matt Fellows · 技术社区 · 7 年前

我有一个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 但我不知道如何让组件监听它(我设法让顶级应用程序实例监听事件,但没有比这更进一步的了)

有什么想法,提示,想法吗?

1 回复 | 直到 7 年前

Kapitan Teemo 7 年前

下面是一个使用 emit 在vuejs

在你的应用程序中。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
    })
}