Vue.js Vue Eventbus:handler.apply不是函数

我想在其他组件发生更改时重新加载其中一个组件（例如，我使用axios发送put）

我尝试使用eventbus，但出现以下错误：

handler.apply不是一个函数

在我要触发的组件中：

EventBus.$emit('compose-reload', Math.random()*100);

我想被触发的地方：

<template>
    <div class="">

        <div class="">
            <div class="columns">
                <div class="column is-one-fifth">
                    <div class="box">
                        <Menu></Menu>
                    </div>
                </div>
                <div class="column is-four-fifth">
                    <div class="box">
                        <router-view :key="key"></router-view>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>
<script>
    import Menu from './includes/Menu'

    import EventBus from '../../../event-bus';

    export default {

        components: {
            Menu,
        },
        data() {
            return {
                key: null
            }
        },
        mounted(){
            EventBus.$on('compose-reload', this.key);
        },
        created(){
            this.key = Math.random()*100
        }
    }
</script>

从“./includes/Menu”导入菜单
从“../../../event bus”导入EventBus；
导出默认值{
组成部分：{
菜单，
},
数据（）{
返回{
键：空
}
},
安装的（）{
EventBus.$on（'compose-reload'，this.key）；
},
创建（）{
this.key=Math.random（）*100
}
}

EventBus.

上的$on需要一个处理函数作为第二个参数，但变量

this.key

被传入，因此出现错误

您应该更改此选项：

mounted(){
   EventBus.$on('compose-reload', this.key);
}

为此：

mounted(){
   EventBus.$on('compose-reload', key => {
     this.key = key;
   });
}