为什么在挂载组件时会触发 this.$on() 回调？

Question

我有一个组件，它在某些活动时向其父级$emit。

父级监听这个事件并在接收到时触发一个函数。这是在mount()组装的：

<template>
    <v-app>
        <v-toolbar fixed app>
            <v-toolbar-title v-text="title"></v-toolbar-title>
            <v-spacer></v-spacer>
            <v-btn color="error" dark large>Large Button</v-btn>
        </v-toolbar>
        <v-content>
            <new-case v-on:dirty="updateDirty"></new-case>
        </v-content>
        <v-footer app>
            <span>&copy; 2017</span> dirty: {{dirty}}
        </v-footer>
    </v-app>
</template>

<script>
    export default {
        data() {
            return {
                case: {
                    id: null,
                    title: null,
                },
                cases: [],
                title: 'Vuetify.js',
                dirty: false,
            }
        },
        watch: {
            dirty: () => {
                console.log('requesting relaod of data')
            }
        },
        methods: {
            updateDirty(what) {
                console.log('requesting update of dirty state '+what)
                this.dirty = what
            }
        },
        mounted() {
            this.$on('dirty', this.updateDirty())
        }
    }
</script>

整个机制工作正常（emmited even 被父级正确处理），除了当组件被挂载时，我在控制台中看到

17:36:01.380 App.vue?ea99:36 requesting update of dirty state undefined
17:36:01.449 App.vue?ea99:31 requesting relaod of data
17:36:01.561 backend.js:1  vue-devtools  Detected Vue v2.5.13 

为什么在安装组件时会触发this.updateDirty()？（即使尚未发出任何内容 - 不仅尚未使用会发出某些内容的组件，而且 DevTools Vue 面板也没有使用尚未显示任何事件）

Answer 1

问题在于你 $on 调用本身。 updateDirty 后面的括号this.$on('dirty', this.updateDirty()) 是罪魁祸首，它告诉 JS 运行函数并将结果存储为事件处理程序。请改用this.$on('dirty', this.updateDirty)，这样您将传递对函数的引用而不是结果。