javascript - Vue.js，父级未响应子级事件

Question

我遇到一个问题，即父组件没有响应子组件的事件。使用 Vue 开发者工具，我可以看到 events_loading事件由 <Calendar> 发出组件，但父组件没有响应。

父 HTML 是...

<div class="appContainer" v-on:events_loaded="test" v-bind:class="{ 'appContainer--isLoading':is_loading }">
    <app-header></app-header>
    <div class="appView" id="js-appView">
        <aside class="appAside">
            <date-picker></date-picker>
        </aside>
        <main class="appMain">
            <calendar></calendar>
        </main>
    </div>
</div>

JS 是...

export default {
    name: 'app',
    methods: {
        test: function() {
            alert('sdfds');
        }
    },
    data: function() {
        return {
            is_loading: false
        }
    },
    components: {
        'app-header': AppHeader,
        'date-picker': DatePicker,
        'calendar': Calendar
    }
}

Answer 1

您想监听日历中的事件，因此您应该在日历组件上编写v-on:

<calendar v-on:events_loaded="test"></calendar>

不在父组件的容器上。