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甚至由父级正确处理）

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

问题在于你自己的电话。 updateDirty，this.$on('dirty', this.updateDirty())之后的括号是罪魁祸首，它告诉JS运行该函数并将结果存储为事件处理程序。请尝试使用this.$on('dirty', this.updateDirty)，以便将引用传递给函数而不是结果。

为什么这个。$ on（）回调在组件安装时触发？

1 个答案: