Question

我在Laravel 5.5中使用VueJS。我在同一页面中使用了两个组件。其中一个创建项目，另一个按顺序列出项目。所以我想要实现的是成功创建Item时，ItemList组件应该更新自己并通过发出AJAX请求来获取最新项目。

在ItemCreate组件ItemCreate.vue上：

methods: {
        sendItemData: function () {
            this.$emit('items-updated');
            axios.post('/dashboard/item', {
                name: this.itemName,
            })
                .then(function (response) {
                    if (response.status === 201) {
                        toastr.success('Crawler created successfully!', {timeout: 2000});
                        this.$emit('items-updated');
                    }
                })
                .catch(function (error) {
                    toastr.error(error, 'Ooops! Something went wrong!');
                })
        }

在ItemList组件ItemList.vue上：

methods: {
        getItems: function () {
            axios.get('/items')
                .then(function (response) {
                    this.items = response.data;
                })
                .catch(function (error) {
                    toastr.error(error, 'Ooops! Something went wrong!');
                })
        },
    },
    mounted() {
        this.$on('items-updated', function () {
            this.getItems();
        })
    }

最后这里是主app.js设置：

require('./bootstrap');

window.Vue = require('vue');

Vue.component('item-list', 
  require('./components/entities/item/ItemList'));
Vue.component('item-create', 
  require('./components/entities/item/ItemCreate'));

const app = new Vue({
    el: '#app'
});

Answer 1

您需要使用global EventBus：

在main.js中

：

window.EventBus = new Vue();

然后在你的组件中：

EventBus.$emit('items-updated');

EventBus.$on('items-updated',() => {});

两个独立组件之间的VueJS事件

1 个答案: