Question

我想在vue应用中实现事件总线。

首先，我想进行事件总线调用以开始加载。我称之为$on的主要组件的脚本标签如下所示：

<script>
    import store from '../store.js'
    import EventBus from '../event-bus';

    import Header from './includes/Header'
    import Footer from './includes/Footer'
    import Loading from './includes/Loading'

    export default {
        data() {
            return {
                isLoading: null
            }
        },
        components: {
            Header,
            Footer,
            Loading
        },
        mounted() {
            EventBus.$on('isLoading'), function (payLoad) {
                console.log(payload)
                this.isLoading = payload
            };
        }
    }
</script>

但是我得到了这个错误：

[Vue警告]：事件处理程序中“ isLoading”的错误：“ TypeError：处理程序> undefined”

我该如何解决？

Answer 1

您有两个错误。它应该看起来像这样：

EventBus.$on('isLoading', (payLoad) => {
  console.log(payload)
  this.isLoading = payload
});

错误号1是逗号前面的结尾)，导致$on被调用而没有函数。这就是引起警告消息的原因。该结束)应该在}和;之间结束。

错误2使用的是正常功能，导致this在该功能内部不正确。箭头函数将保留周围范围的this值。

我建议使用可以解决这类问题的IDE或linter。您的代码在语法上是有效的，但是可以通过适当的工具轻松检测到此类错误。

Vue：事件总线处理程序未定义

1 个答案: