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

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:处理程序>未定义“

我怎么才能修好它？

Answer 1

你犯了两个错误。它应该是这样的：

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

错误1是在逗号之前关闭)，导致调用$on时没有函数。这就是导致警告信息的原因。结束的)应该在}和;之间。

错误2是使用正常函数，导致this在函数中不正确。箭头函数将保留周围作用域中的this值。

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